Tailwind CSS 是一个非常强大且受欢迎的实用型 CSS 框架，于2017年由.Adam Wathan、Jonathan Reinink、David Hemphill 和 Steve Schoger 共同创立。 这个框架的主要目标是帮助开发者快速构建定制化的用户界面，而无需从头开始编写 CSS 代码。
Tailwind 提供了一整套预先定义好的类名，代表 CSS 的各种属性，如颜色、字体大小、间距等。这些实用类能支持你快速完成布局，同时保持简洁无冗余代码。
通过采用响应式类，Tailwind 可以帮助你无缝地构建适应各种屏幕尺寸的应用程序。
使用Tailwind 的高度可配置性，你可以根据项目需求定制自己的设计系统。举例来说，你可以轻松地添加、编辑或删除颜色、字体等相关设置。
Tailwind 采用PostCSS 插件系统，将实用类生成的 CSS 打包压缩为最小，可优化加载速度。
 Tailwind 提供了一整套官方插件，如动画库、表单控件等。此外，开发社区也贡献了大量非官方插件和资源，让开发者能够选择更加丰富的功能。
Tailwind CSS 广泛应用于以下场景：
- 前端项目：无论是使用纯 HTML 结构还是结合 JavaScript 框架（例如：React、Vue 和 Angular），Tailwind 都能实现高度定制化的用户界面。
- Web 应用程序： 开发具有复杂交互和列表式布局的应用界面。
- 电子邮件： 利用 "tailwindcss-inline" 工具，可以为 HTML 邮件模板生成内联样式。
- 营销页面： 使用 Tailwind 创建具有吸引力的营销页面和布局，可轻松快速地进行样式调整。
- 开发原型：快速搭建原型，并便捷地进行迭代。
如此多的优点和特性使得Tailwind CSS变得越来越受欢迎，是一个非常值得学习和尝试的框架。

Tailwind CSS

在 Tailwind 中，为了保持单个网格列（grid column）的高度一致，通常会涉及到两种策略：CSS Grid 或者 Flexbox。以下是两种方法的解释和示例：

### 方法一：使用 CSS Grid

使用 Tailwind CSS 的 Grid 布局，你可以通过设置 `grid-template-rows` 或者使用 `grid-auto-rows` 类让列高度一致。这意味着所有 grid items 将会被指定相同的高度。

```html

<div class="grid grid-cols-3 grid-rows-1 gap-4">
  <div class="bg-blue-500 row-span-1">内容 1</div>
  <div class="bg-red-500 row-span-1">内容 2</div>
  <div class="bg-green-500 row-span-1">内容 3</div>
</div>
```

在上述代码中，`grid-cols-3` 创建了三列，`grid-rows-1` 则确保了行数为一。所有的列都有一个 `row-span-1` 的类，表示每个 grid item 都会跨越1行，这将导致它们有相同的高度。

### 方法二：使用 Flexbox

当使用 Flexbox 时，你可以让所有的 flex items 高度相等，这需要设置父元素的 `items-stretch` 类，这是默认行为，所以通常不需要额外设置。

```html

<div class="flex">
  <div class="flex-1 bg-blue-500">内容 1</div>
  <div class="flex-1 bg-red-500">内容 2</div>
  <div class="flex-1 bg-green-500">内容 3</div>
</div>
```

在此示例中，使用了 `flex` 类来定义一个 flex 容器，并且 `flex-1` 类确保了每个 flex item 都将占有相等的空间，并且它们的高度将会被拉伸以填充父容器的高度，这就实现了高度一致的效果。

### 处理内容不等的情况

如果 grid 或 flex items 中的内容不同，导致高度不一致，你可以考虑使用额外的 CSS 来保证高度相等。这可以通过设置固定的高度或者使用更高级的 CSS 技巧（如 `min-height`）来完成。

例如：

```html

<div class="flex">
  <div class="flex-1 bg-blue-500" style="min-height: 150px;">内容 1</div>
  <div class="flex-1 bg-red-500" style="min-height: 150px;">内容 2</div>
  <div class="flex-1 bg-green-500" style="min-height: 150px;">内容 3</div>
</div>
```

使用 `min-height` 可以确保即使内容较少，每个 item 也至少会有150px的高度，同时内容多的 item 则会根据内容扩展。

这些方法都可以在 Tailwind CSS 中实现，确保了网格布局的灵活性和响应性，同时保持了设计的一致性和整洁性。

如何在 tailwindcss 中保持单个grid column的高度

Tailwind CSS 提供了一个非常方便的工具 `@screen` 指令，这使得在媒体查询中引用预定义的断点变得十分简单和高效。在实际使用中，`@screen` 指令能够帮助开发者快速地应用响应式设计，而不需要记住具体的像素断点。

### 使用 `@screen` 的基本方法

在 Tailwind CSS 中，如果你想要在特定的屏幕尺寸应用样式，可以使用如下的方法：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @screen md {
    .custom-class {
      background-color: blue;
    }
  }
}
```

在这个例子中，`.custom-class` 将只在中等设备（例如平板电脑）上应用蓝色背景。`md` 是 Tailwind CSS 预定义的断点之一，代表了中型设备的屏幕尺寸。

### 自定义断点

Tailwind CSS 允许你在 `tailwind.config.js` 文件中自定义断点。这意味着你可以根据项目需求增加或修改断点。下面是如何自定义断点的一个例子：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'xxl': '1440px',
      },
    },
  },
}
```

在这个配置中，我们添加了一个名为 `xxl` 的新断点，对应 1440px 的屏幕宽度。

使用这个新断点的方法和使用预定义断点相同：

```css
@layer utilities {
  @screen xxl {
    .custom-class {
      padding: 20px;
    }
  }
}
```

这样，`.custom-class` 的内边距属性将只在屏幕宽度至少为 1440px 的设备上生效。

### 优势和实际应用

使用 `@screen` 指令的主要优势是提高了代码的可读性和维护性。你不必记住具体的像素值，只需使用逻辑名称（如 `md`、`lg`），就可以很清楚地知道代码的作用。此外，通过在一个地方定义断点，你可以确保整个项目的一致性，并在需要时轻松地做出全局调整。

在实际项目中，我曾经使用 `@screen` 来设计一个复杂的响应式导航菜单，该菜单在不同的设备上有不同的布局和样式。通过使用 `@screen`，我能够轻松管理各种样式，确保在所有设备上都能提供良好的用户体验。

如何使用Tailwindcss @ screen

在Tailwind CSS中，设置文本的默认颜色通常是通过配置文件（`tailwind.config.js`）来实现的。你可以在这个文件中指定好你希望的默认颜色，然后在整个项目中使用这种颜色。下面是一个如何设置默认文本颜色的步骤和示例：

### 步骤 1: 打开或创建 `tailwind.config.js` 文件

首先，确保你的项目中有一个 `tailwind.config.js` 文件。如果没有，可以通过运行 `npx tailwindcss init` 命令来创建一个。

### 步骤 2: 配置默认颜色

在 `tailwind.config.js` 文件中，你可以扩展默认的主题配置。为了设置文本颜色，需要在 `extend` 对象中的 `colors` 属性下添加你的默认颜色。

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        // 设置默认的文本颜色为某种灰色
        'gray': '#333',
      }
    }
  }
}
```

### 步骤 3: 使用自定义颜色

配置文件设置好后，你可以在你的 HTML 或者其他模板文件中使用这个颜色类。例如：

```html
<p class="text-gray">这是一段默认的灰色文本</p>
```

### 示例项目

假设我们有一个简单的网页项目，其中的文本需要统一设置为灰色。在 `tailwind.config.js` 中进行如上设置后，所有使用 `text-gray` 类的文本元素都会应用这个颜色。

请注意，这里的 `'gray'` 只是一个例子，你可以根据实际需求定义不同的颜色名称和值。此外，你还可以在配置文件中设置其他默认样式，比如字体大小、行高等，来实现更加一致和专业的视觉效果。

如何设置 Tailwind 中文本的默认颜色？

在使用 Tailwind CSS 时，有时候需要根据项目需求更改默认的样式配置。Tailwind 提供了一个非常灵活的配置系统，可以通过编辑 `tailwind.config.js` 文件来实现自定义样式。以下是更改 Tailwind 默认样式选项的步骤和相关示例：

### 第一步：初始化配置文件

如果你的项目中还没有 `tailwind.config.js` 文件，你可以通过以下命令生成一个：

```bash
npx tailwindcss init
```

这条命令会创建一个包含默认配置的 `tailwind.config.js` 文件。

### 第二步：修改配置文件

打开 `tailwind.config.js` 文件，你会看到一个类似于以下的结构：

```javascript
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

#### 修改颜色、字体、间距等

你可以在 `theme` 字段中添加或修改默认的设计系统，例如更改色彩、字体、间距等。例如，如果要添加新的颜色或覆盖默认颜色：

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
      },
    },
  },
}
```

这将使你能够在项目中使用 `bg-custom-blue` 类来应用新的颜色。

#### 修改响应式断点

如果需要更改响应式设计的断点，可以这样操作：

```javascript
module.exports = {
  theme: {
    extend: {
      screens: {
        'xl': '1280px',
      },
    },
  },
}
```

这里我们更改了 `xl` 断点的默认值。

### 第三步：使用配置

一旦配置文件修改完成，你就可以在项目中使用这些新的或被覆盖的样式了。Tailwind 会根据你的配置文件来生成相应的 CSS。

### 示例：项目中的应用

假设我们在一个项目中需要使用特定的主题色和字体：

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0033ad',
      },
      fontFamily: {
        'body': ['Open Sans', 'sans-serif'],
      },
    },
  },
}
```

现在，你可以在 HTML 中用 `text-brand-blue` 和 `font-body` 来使用这些自定义样式。

通过这种方式，Tailwind CSS 提供了高度的可配置性，使得开发者可以轻松地根据具体项目需要调整样式。

怎么更改 tailwind 默认样式选项？

在React.js中使用Tailwind CSS来动态添加`className`是一个非常实用的技术，可以让我们根据组件的状态或者属性来调整样式。下面我将通过一个具体的例子来说明如何实现这一功能。

首先，确保你的项目中已经安装并配置了Tailwind CSS。如果还没有配置，可以按照Tailwind CSS官网的指导先进行安装和配置。

接下来，我们创建一个简单的React组件来展示如何动态调整className。假设我们有一个按钮组件，我们想根据按钮是否被点击来改变它的背景颜色。

### 示例代码

```jsx
import React, { useState } from 'react';

const DynamicButton = () => {
  // 使用useState钩子来跟踪按钮是否被点击
  const [isActive, setIsActive] = useState(false);

  // 定义一个函数来处理点击事件
  const toggleButton = () => {
    setIsActive(!isActive);
  };

  return (
    <button
      // 根据isActive的值动态改变className
      className={`p-4 text-white font-bold ${isActive ? 'bg-blue-500' : 'bg-gray-500'}`}
      onClick={toggleButton}
    >
      {isActive ? 'Active' : 'Inactive'}
    </button>
  );
};

export default DynamicButton;
```

在这个例子中，我们首先导入了`useState`钩子，用于创建一个名为`isActive`的状态变量，这个变量用来记录按钮的激活状态。接着，我们定义了一个`toggleButton`函数，该函数在按钮每次被点击时通过调用`setIsActive`来切换`isActive`的值。

在`button`元素的`className`属性中，我们使用了模板字符串语法来根据`isActive`的值动态地切换Tailwind的背景颜色类。如果`isActive`为`true`，则按钮背景为蓝色(`bg-blue-500`)，否则为灰色(`bg-gray-500`)。

最后，按钮的文字也根据`isActive`的状态显示为'Active'或'Inactive'。

这种方法可以非常灵活地根据React组件的状态或属性来应用不同的Tailwind样式，从而实现丰富的交互效果和视觉表现。

如何使用 Tailwind 在 React . Js 中动态添加 className

在使用 Tailwind CSS 时，要为链接添加默认的下划线样式，可以通过几种方式实现。以下是一些方法和示例：

### 方法 1: 直接在 HTML 元素中添加类

最直接的方法是在你的链接元素 (`<a>` 标签) 上直接添加 `underline` 类。这个类是 Tailwind 提供的工具类之一，用于添加文本下划线。

```html
<a href="https://example.com" class="underline">Visit Example.com</a>
```

### 方法 2: 使用 CSS 扩展

如果你想在整个项目中为所有链接设置默认的下划线样式，可以在 Tailwind 的配置文件中使用 `extend` 功能来全局定义样式。这样，你不需要在每个链接上单独添加类。

首先，确保在你的项目中安装了 Tailwind CSS 并正确配置了 `tailwind.config.js` 文件。然后，你可以通过扩展 Tailwind 的默认主题来实现。

```javascript
// tailwind.config.js
module.exports = {
  extend: {
    // 扩展基础样式
    typography: {
      DEFAULT: {
        css: {
          'a': {
            textDecoration: 'underline', // 为所有链接添加下划线
          },
        },
      },
    },
  },
}
```

### 方法 3: 组合使用 Tailwind CSS 与自定义 CSS

如果你需要更复杂的样式或者条件，你可以结合 Tailwind 的工具类和自定义 CSS。例如，你可能只想在特定条件下显示下划线（比如鼠标悬停时）。

```html
<a href="https://example.com" class="hover:underline">Visit Example.com</a>
```

在这个例子中，`hover:underline` 类意味着下划线只会在鼠标悬停在链接上时显示。

### 总结

根据你的具体需求，你可以选择直接在HTML中使用工具类，通过Tailwind配置进行全局设置，或者结合使用Tailwind和自定义CSS。每种方法都有其适用场景，可以根据项目的规模和需求灵活选择。

如何使用tailwind 实现在默认情况下为链接加下划线样式？

在 Angular 项目中使用 TailwindCSS 可以大幅提高开发效率和项目的可维护性。`NgClass` 是 Angular 的一个指令，用于动态地向组件的 HTML 元素添加或删除 CSS 类。结合 TailwindCSS，您可以根据组件的状态动态应用样式，使得界面更加灵活和响应式。

### 使用步骤：

1. **集成 TailwindCSS 到 Angular 项目中**
   首先，确保你的 Angular 项目中已经集成了 TailwindCSS。如果还没有集成，可以通过以下命令添加 TailwindCSS：
   ```bash
   ng add @ngneat/tailwind
   ```
   或者按照 [TailwindCSS 官方文档](https://tailwindcss.com/docs/guides/angular) 上的引导来手动设置。

2. **使用 NgClass 与 TailwindCSS**
   接下来，您可以通过 `NgClass` 在 Angular 组件中根据条件动态应用 TailwindCSS 类。例如，假设我们有一个按钮组件，我们想根据按钮是否被点击来改变其样式。

   **HTML:**
   ```html
   <button [ngClass]="{'bg-blue-500 hover:bg-blue-700': isActive, 'bg-gray-500 hover:bg-gray-700': !isActive'}" (click)="toggleActive()">Click me!</button>
   ```

   **TypeScript:**
   ```typescript
   import { Component } from '@angular/core';

   @Component({
     selector: 'my-button',
     templateUrl: './my-button.component.html'
   })
   export class MyButtonComponent {
     isActive: boolean = false;

     toggleActive() {
       this.isActive = !this.isActive;
     }
   }
   ```
   在这个例子中，我们定义了一个 `isActive` 属性来跟踪按钮的激活状态。`NgClass` 指令根据 `isActive` 的值动态添加或移除 TailwindCSS 的类。当按钮处于激活状态 (`isActive` 为 `true`) 时，按钮将应用 `bg-blue-500 hover:bg-blue-700` 类；反之，应用 `bg-gray-500 hover:bg-gray-700` 类。

### 注意事项：
- 确保在 TailwindCSS 的配置文件中启用了所需的类，特别是 `hover` 状态的类。
- 使用 `NgClass` 可以非常灵活地控制样式，但也要注意不要使模板过于复杂。如果类的逻辑非常复杂，考虑在组件的 TypeScript 代码中构建类名字符串，然后在模板中引用。

通过这种方式，你可以使 Angular 组件的样式响应不同的状态和条件，同时保持样式的管理便捷和高效。

NgClass 如何使用 TailwindCSS3 ？

在Tailwind CSS中，你可以通过在`tailwind.config.js`文件中修改`corePlugins`和`theme`部分来移除默认提供的样式。Tailwind 允许你禁用核心插件（core plugins），这些插件负责生成一组特定的实用类。

以下是一个如何禁用特定样式的步骤，以及一个简单的例子：

### 步骤 1: 创建或定位 `tailwind.config.js` 文件
要自定义 Tailwind 的默认配置，你需要有一个 `tailwind.config.js` 文件。如果还没有这个文件，你可以通过运行 `npx tailwindcss init` 命令来创建它。

### 步骤 2: 确定要删除的样式
先确认你希望禁用的特定样式。例如，如果你想要删除背景色的工具类（如 `bg-red-500` 等），你需要确定这些类是由哪个核心插件生成的。在这个例子里，这些类是由 `backgroundColor` 插件生成的。

### 步骤 3: 更新 `tailwind.config.js` 文件
在 `tailwind.config.js` 文件中，你可以通过设置 `corePlugins` 部分的键值对来启用或禁用核心插件。下面是一个禁用背景色工具类的例子：

```javascript
module.exports = {
  corePlugins: {
    // 禁用背景色相关的工具类
    backgroundColor: false,
  },
}
```

### 例子
下面是一个更详细的例子，展示了如何从基础配置中删除特定的样式：

```javascript
module.exports = {
  theme: {
    // 重写或扩展默认主题
    extend: {
      // 例如，移除特定的字体尺寸
      fontSize: {
        'xs': null,
        'sm': null,
        // 保留 'base' 和其他尺寸
      },
    },
  },
  corePlugins: {
    // 禁用整个背景色工具类
    backgroundColor: false,
    // 禁用其他不需要的核心插件
    float: false, // 例如，禁用浮动类
  },
};
```

在这个例子中，我们通过将 `fontSize` 中的 `'xs'` 和 `'sm'` 设置为 `null` 来移除这些特定的字体尺寸。同时，设置 `corePlugins` 属性为 `false` 可以完全禁用 `backgroundColor` 和 `float` 相关的工具类。

记住，一旦你禁用了一个核心插件，所有与该插件相关的实用类都将不会在生成的 CSS 文件中出现。

### 步骤 4: 测试配置更改
在你完成了 `tailwind.config.js` 文件的更改之后，确保运行你的构建流程来生成新的样式表，并在项目中进行测试以确保这些更改按照预期工作。

<p>Disabling<a href=“ https://tailwindcss.com/docs/preflight#extending -Tailwind preflight</a>is the closest thing that can help</p>

<p>This issue is resolved in tailwind v3.4.3</p>

<p>A bit late on this but I ended debugging with the solution above and once found the issue, I used<a href=“ https://www.npmjs.com/package/patch-package "Rel=" nofollow noreferrer "> https://www.npmjs.com/package/patch-package To remove that problematic style from the package</ P>

<p>One good option I found is to turn off tailwind preflight and use custom pre light then you can remove styles you don't want</p>

<p>I solved this issue by adding all of default styles inside of a. scss file within a class for example called. ql wrapper {} and when I need somewhere to show the details that I added from a form</p>

TailwindCSS 如何从基础默认配置上删除特定的样式？

在使用 TailwindCSS 时，如果我们想要实现 grid 网格布局中各项（grid items）具有自动高度，以便各项能够根据内容自动调整高度并且保持一致，我们需要使用 TailwindCSS 提供的相关工具类。以下是具体的方法：

1. **使用 Grid 布局**: 首先，通过 `grid` 类来定义一个容器为网格布局（Grid Layout）。

2. **设置 Grid 列**: 使用 `grid-cols-*` 类来定义容器中应该有多少列。例如，使用 `grid-cols-3` 类来创建三列布局。

3. **对齐 Grid 项**: 使用 `align-content` 和 `align-items` 相关类来控制网格项的垂直对齐方式。如果我们希望网格项内容能够动态地确定其高度并且希望它们在行内对齐，我们可以使用 `align-items-start` 类。

4. **使用自动行高**: 通过 `auto-rows-*` 类，我们可以设置网格项的行高为自动（auto）。这意味着每个网格项会根据其内容自动调整其高度。比如使用 `auto-rows-auto` 类来实现每个项高度根据内容自动调整。

下面是一个简单的例子，展示了如何在 TailwindCSS 中设置一个三列布局的 grid 网格，每个网格项都有自动高度：

```html
<div class="grid grid-cols-3 gap-4 auto-rows-auto">
  <div class="bg-blue-300 p-4">
    
    <p>第一项内容较少。</p>
  </div>
  <div class="bg-red-300 p-4">
    
    <p>第二项内容较多，自动高度会根据内容自适应，使得此项高度增加。</p>
    <p>额外的文本行。</p>
    <p>额外的文本行。</p>
  </div>
  <div class="bg-green-300 p-4">
    
    <p>第三项内容适中。</p>
  </div>
  
</div>
```

在这个例子中，`grid-cols-3` 创建了一个三列布局，`auto-rows-auto` 确保所有网格项的高度根据其内容自动调整。使用 `gap-4` 类为网格项之间增加空间。每个网格项使用 `p-4` 类来增加内边距，以及 `bg-*` 类来设置背景颜色用于视觉区分。

通过上述方法，TailwindCSS 可以轻松实现一个自适应内容高度的 grid 网格布局。

<p>Simply remove <code>grid-rows-2</code>. No need to define the rows, defining the columns is enough</p>

<p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html s-code-block"><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"inline-grid grid-cols-2"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>&gt;</span>Full name:<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>&gt;</span>Favoutite fruits:<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>&gt;</span>John Doe<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Apples<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Oranges<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Bananas<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<div class="snippet-result"><div class="snippet-ctas"><button type="button" class="s-btn s-btn__filled"><svg aria-hidden="true" class="svg-icon iconPlay" width="17" height="18" viewBox="0 0 17 18"><path d="M3 2.87a1 1 0 0 1 1.55-.83l9.2 6.13a1 1 0 0 1 0 1.66l-9.2 6.13A1 1 0 0 1 3 15.13z"></path></svg><span> Run code snippet</span></button><input class="copySnippet s-btn s-btn__outlined" type="button" value="Copy snippet to answer"><button type="button" class="s-btn hideResults" style="display: none;">Hide results</button><div class="popout-code"><a class="snippet-expand-link">Expand snippet</a></div></div><div class="snippet-result-code" style="display: none;"><iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe></div></div></div>
</div>
<p></p>

TailwindCSS 如何在设置 grid 网格项布局时能够有自动高度？

在使用TailwindCSS时，要给列表元素添加项目符号（即列表的点），我们可以使用一些基本的TailwindCSS实用类来实现。以下是一个简单的步骤，展示如何操作：

1. 首先，确保你的项目中已经安装并配置了TailwindCSS。
2. 接下来，使用`list-disc`类来为`<ul>`或`<ol>`元素添加项目符号。
3. 然后，使用`list-inside`类来设置列表的样式为内部，这样项目符号会显示在列表项内容的内侧，或者使用`list-outside`来使项目符号显示在外侧。
4. 最后，根据需要对列表项进行样式调整，比如使用`p-`, `m-`, `text-`等实用类来添加内边距、外边距或设置文本大小等。

下面是一个具体的例子：

```html
<ul class="list-disc list-inside m-4 p-2">
  <li class="mb-2 text-blue-600">第一项</li>
  <li class="mb-2 text-green-600">第二项</li>
  <li class="text-red-600">第三项</li>
</ul>
```

以上代码说明：
- `list-disc` 类会给每个 `<li>` 元素前面添加一个圆点作为项目符号。
- `list-inside` 类将项目符号放置在内容的内侧。
- `m-4` 类在整个 `<ul>` 元素上添加外边距。
- `p-2` 类在整个 `<ul>` 元素上添加内边距。
- `mb-2` 类在每个 `<li>` 元素的底部添加外边距，除了最后一个。
- `text-` 类用来设置不同的文字颜色。

通过这些步骤，你就可以仅使用TailwindCSS的实用类来获得列表元素的点，并且对其样式进行定制。

Just add `marker:text-color`, where `color` is the color you want:

    <ul class='marker:text-green list-outside list-disc ml-6'>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
      <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
      <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    </ul>

You will have to specify it like this to achieve a colored bullet list.

    <li class="text-red-500">
      <div class="text-black">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.
      </div>
    </li>

I solved it like this:

    <ul class='list-outside list-disc ml-6'>
        <li class="text-red-500">
            <span class="text-black">Lorem ipsum dolor</span>
        </li>
        <li class="text-red-500">
            <span class="text-black">Nunc nec gravida enim.</span>
        </li>
    </ul>

Niche answer here, but for those wanting to achieve this in innerHTML in a React component, you can target the `li` element specifically with:

    .your-class {
      li::marker {
        @apply text-sky;
      }
    }
    

    <div className='your-class' dangerouslySetInnerHTML={{__html: yourContent}}/>
    

This answer is an approximation and depends on framework. If you're using Tailwind in React you may already be familiar with 'unresetting' your your base styles. This solution is for those who have done this.

More [here](https://www.swyx.io/tailwind-unreset/) and [here](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles).

This worked May 2023 (in the li class):

    <ul><li class="list-disc marker:text-red-800">text for this bullet point goes here</li></ul>
    

or, in the ul class (applies to all discs in the ul):

    <ul class="marker:text-indigo-900"><li class="list-disc ">text for this bullet point goes here</li></ul>

如何仅使用 TailwindCSS 实用程序类来获得列表元素的点？

当您想要在 TailwindCSS 中实现宽度变化的动画效果时，您通常会通过组合几个不同的类来达到目的。具体来说，您会用到 TailwindCSS 的响应式设计特性、宽度工具类、过渡工具类和动画持续时间类。下面是实现宽度变化动画效果的步骤：

1. 定义初始和目标宽度
   首先，您需要定义元素的初始宽度和动画结束时的宽度。Tailwind 提供了一系列宽度类，比如 `w-0` (宽度为 0)，`w-full` (宽度为父元素的 100%)。

2. 使用过渡工具类
   为了使宽度变化更平滑，您可以使用 TailwindCSS 提供的 `transition` 类来定义元素的过渡属性。

3. 设置动画持续时间
   使用 `duration-` 前缀的类来设置动画的持续时间，例如 `duration-500` 会设置动画持续时间为 500 毫秒。

4. 触发动画
   您可以通过伪类（如 `hover:`）或 JavaScript 来触发宽度的变化。例如，您可以使用 `hover:` 类在鼠标悬停时改变元素的宽度。

下面是一个具体的例子，其中包含了一个会在鼠标悬停时展开宽度的动画：

```html

<div class="transition-width duration-500 hover:w-full w-0">
  
</div>
```

在这个例子中，`transition-width` 类定义了宽度变化的过渡效果，`duration-500` 类定义了动画的持续时间为 500 毫秒，`hover:w-full` 类表示当鼠标悬停在元素上时，其宽度会变成父元素的 100%，而 `w-0` 则定义了元素初始的宽度为 0。

请记住，TailwindCSS 默认情况下可能不包含所有宽度变化的过渡效果，您可能需要在您的 `tailwind.config.js` 文件中自定义 `theme.extend` 部分来添加您需要的过渡效果。

此外，如果您希望使用 JavaScript 来触发动画效果，可以通过添加或删除类来实现：

```javascript
const element = document.querySelector('.element-class');

element.addEventListener('mouseenter', () => {
  element.classList.toggle('w-full');
});

element.addEventListener('mouseleave', () => {
  element.classList.toggle('w-0');
});
```

上面的 JavaScript 代码片段展示了如何在鼠标移入和移出时切换宽度相关的类，从而触发宽度变化的动画效果。

<p>You need to perform a few steps to activate the behaviour you are looking for.</p>
<p>The first one is about extending you Tailwind theme via <code>tailwind.config.js</code>. You need to add the <code>transitionProperty</code> for <code>width</code>.</p>
<pre class="lang-js s-code-block"><code class="hljs language-javascript"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
    ...
    <span class="hljs-attr">theme</span>: {
        ...
        <span class="hljs-attr">extend</span>: {
            ...
            <span class="hljs-attr">transitionProperty</span>: {
                <span class="hljs-string">'width'</span>: <span class="hljs-string">'width'</span>
            },
        },
    },
}
</code></pre>
<p>The changes above create the <code>transition-width</code> class. Simply apply this one to your nav tag. In your specific case you can overwrite the <code>transition-all</code> class.</p>
<pre class="lang-html s-code-block"><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"sidebarWidth"</span>&gt;</span>
</code></pre>
<p>The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.</p>
<h2>Background to the Problem</h2>
<p>By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using <code>transition</code> class.</p>
<pre class="lang-css s-code-block"><code class="hljs language-css"><span class="hljs-attribute">transition-property</span>: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
<span class="hljs-attribute">transition-timing-function</span>: <span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0.4</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.2</span>, <span class="hljs-number">1</span>);
<span class="hljs-attribute">transition-duration</span>: <span class="hljs-number">150ms</span>;
</code></pre>
<p>Like you can see <code>width</code> and <code>height</code> are missing in <code>transition-property</code>.</p>
<p>You can find more information about it in the <a href="https://tailwindcss.com/docs/transition-property" rel="noreferrer">Tailwind documentation</a>.</p>

<p>You can make your own transition property like in tailwind.config.js :</p>
<p>Multiple properties :</p>
<pre><code>module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        multiple: "width , height , backgroundColor , border-radius"
      }
   }
}
</code></pre>
<p>One property :</p>
<pre><code>module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        width: "width"
      }
   }
}
</code></pre>

<p>If you're just looking to implement this in a single location &amp; it's not something you need throughout your entire theme (for that follow @insertcoin answer above), you can simply use an arbitrary one-off value as outlined here in the <a href="https://tailwindcss.com/docs/transition-property#arbitrary-values" rel="nofollow noreferrer">Tailwind Docs</a>.</p>
<p>The snippet below worked nicely for me:</p>
<pre><code>&lt;div class="transition-[width] duration-300"&gt;
  &lt;!-- ... --&gt;
&lt;/div&gt;
</code></pre>

TailwindCSS 如何实现宽度变化的动画效果？

在Tailwind CSS中，您可以使用 `@apply` 指令在 CSS 文件中创建组件样式或使用变体，如 `hover`、`focus` 等来基于父类设置嵌套元素的样式。但是，标准的 Tailwind CSS 并没有提供直接基于父选择器设置嵌套元素样式的功能，这通常是因为 Tailwind 是一个实用工具优先的框架，它鼓励您直接在 HTML 元素上应用实用类。

然而，Tailwind CSS 提供了一个名为 `@layer` 的指令，您可以用它来组织您的 CSS 并利用 Tailwind 的 JIT 模式为嵌套选择器提供样式。这可以通过组合父选择器与子选择器实现。这里是一个示例：

```css
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md;

    .card-title {
      @apply text-lg font-bold;
    }

    .card-content {
      @apply text-base;
    }

    .card-footer {
      @apply text-sm text-gray-500;
    }
  }
}
```

在这个例子中，`.card-title`、`.card-content` 和 `.card-footer` 是嵌套在 `.card` 类下面的元素的样式。这些样式会在构建过程中与 Tailwind CSS 一起处理，并且他们将仅在父类 `.card` 存在时应用。

有一点需要注意的是，这种方法需要您在 `tailwind.config.js` 中启用 JIT 模式，因为标准模式下不支持这种复杂的嵌套。

另外，如果您愿意使用预处理器，如 PostCSS，您可以结合 Tailwind CSS 插件，如 `tailwindcss/nesting`，它可以让您使用标准的 CSS 嵌套语法来编写嵌套规则，这样可以使得基于父类设置嵌套元素的样式更为简洁明了。

This is possible in tailwind 3.1 with the addition of the arbitrary variants feature. The way you would do this is by using a selector on the parent div:

    <div className="card--primary bg-white [&>a]:text-black" >
      <a/>
      <a/>
    <div/>
    
    <div className="card--danger bg-orange [&>a]:text-white" >
      <a/>
      <a/>
    <div/>

**In case of Tailwind CSS**

Read the descriptive and a very brief documentation entry here: [Using arbitrary variants](https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants).

As I can see you need to change the color of all the `<a>` links no matter how deeply they reside in the `<cards>`. Use an underscore between `&` and `a` selectors - `[&_a]:text-black`. This translates to:

    .card--primary {
          
      /* arbitrarily nested <a> links */
      a {
        color: black
      }
    }
    

On the other hand the Tailwind directive with `>` between `&` and `a` => `[&>a]:text-black` would result in this css (only the direct child `<a>` nodes would be styled):

    .card--primary {
          
      /* direct-child <a> links */
      > a {
        color: black
      }
    }
    

**Recap**: the resulting Tailwind HTML for your case:

    <div className="card--primary [&_a]:text-black" >
      <a></a> !-- will be black
      <div>
        <a></a> !-- will be black
      </div>
    <div/>
    
    <div className="card--danger [&_a]:text-white" >
      <a></a> !-- will be white
      <div>
        <a></a> !-- will be white
      </div>
    <div/>
    

That's it. I hope it is helpful.

In tailwind v3 you can have [arbitrary group selectors](https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups). This allows you to specify a how a certain element behaves when nested beneath a parent class.

This is useful when you have a templated element needs to appear different under certain scenarios, but doesn't know anything about its parent context.

It requires the addition of the `.group` class, but then you can do something like this:

    <div class="card">
      <a href="#" class="text-black group-[.card--danger]:text-white">
        Normal Card
      </a>
    </div>
    <div class="card group card--danger bg-orange-600">
      <a href="#" class="text-black group-[.card--danger]:text-white">Danger Card</a>
    </div>
    

Here's an example on Tailwind's playground: [https://play.tailwindcss.com/IQ4W4BVdjw](https://play.tailwindcss.com/IQ4W4BVdjw)

TailwindCSS 如何基于父类设置嵌套元素的样式？

在Tailwind CSS中，要使元素的高度适应其内容，可以使用`h-auto`类，这相当于将CSS的`height`属性设置为`auto`，使得元素高度根据其内部内容自动调整。

例如，如果您有一个包含文本的`div`元素，想要它的高度根据内容来自动调整，那么可以这样写：

```html
<div class="h-auto">
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
```

而如果你是想要在Flexbox布局中，让项目的高度根据内容来调整，可以使用`items-start`或类似的对齐类来确保flex项根据内容定高度。请注意，在这种情况下，高度的自适应是Flexbox属性的一部分，而不是通过TailwindCSS的高度工具类来直接控制。

以下是一个使用Flexbox的例子，其中flex项的高度会根据内容大小而自适应：

```html
<div class="flex flex-col items-start">
  <div class="...">
    
    Lorem ipsum dolor sit amet...
  </div>
  <div class="...">
    
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
  </div>
</div>
```

在实际应用中，你可能需要结合其他类来满足布局的需求，例如用于设置宽度、内边距、外边距或其他样式。 Tailwind CSS的设计原则就是提供细粒度的工具类来帮助你快速构建自定义的UI组件。

you can create custom classes in your tailwind configuration for future use.

example:

    module.exports = {
      important: true,
      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
      darkMode: 'class', // or 'media' or 'class'
      theme: {
        extend: {
          colors: {
            ...
          },
          animation: {
           ...
          },
          width: {
            ...
          },
          margin: {
            ...
          },
          height: {
            76: '18rem',
            78: '19rem',
            82: '22rem',
            97: '28rem',
            98: '31rem',
            99: '38rem',
            100: '40rem',
            'fit-content': 'fit-content(20em)',
          },
          fontFamily: {
            mps: ['Clarkson', 'Helvetica', 'sans-serif']
          },
          flex: {
            2: '1 1 25%',
            3: '1 1 30%',
            4: '1 1 40%',
            5: '1 1 50%',
            6: '1 1 60%',
          }
        },
      },
      variants: {
        extend: {},
      },
      plugins: [],
    }

I managed to fix my issue by setting `h-full` in both `<textarea>` and setting `flex-none` in my problematic `<div>`, resulting in the following code:

    <form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
         <textarea
              role="text-input"
              className="h-full resize-none flex-1"
              placeholder="INPUT"
         />
         <textarea
              role="text-output"
              className="h-full resize-none flex-1"
              placeholder="OUTPUT"
              readOnly
          />
          <div className="w-full flex flex-none"> // This is the troublesome div
              <button>
                    Submit!
              </button>
          </div>
    </form>

TailwindCSS 如何指定内容适应的高度 fit content？

在Tailwind CSS中，设置整个页面的背景色可以通过在HTML的`<body>`标签中使用背景颜色工具类（utility classes）来完成。Tailwind 提供了一系列的背景色工具类，可以用来快速地应用颜色到元素上。以下是如何操作的步骤和一个例子：

1. **查找背景色工具类**：首先，需要选择一个背景色。Tailwind CSS 提供了丰富的颜色系统，有基础的颜色也有深色或浅色的变体。例如，假设你想要一个蓝色的背景，你可以选择 `bg-blue-500`。

2. **应用到 `<body>` 标签**：接下来，将这个工具类应用到 `<body>` 标签上。这样，整个页面的背景将被设置为选定的颜色。

3. **确保TailwindCSS已正确集成**：在实际编码之前，确保你的项目已经集成了TailwindCSS，并且你的配置文件（如`tailwind.config.js`）包含了你想使用的颜色。

### 示例

假设在你的TailwindCSS项目中，你想要将整个页面的背景设置为中等深度的蓝色（例如 `bg-blue-500`）。你可以这样编写你的HTML代码：

```html
<!doctype html>
<html lang="en">
<head>
  
  <link href="/path/to/your/tailwind.css" rel="stylesheet">
</head>
<body class="bg-blue-500">
  
</body>
</html>
```

在这个例子中，整个页面的背景将会是蓝色，因为我们给 `<body>` 标签添加了 `class="bg-blue-500"`。这样，无论页面内容有多长，背景色都会覆盖整个浏览器窗口。

请务必根据你的项目和设计要求选择合适的颜色类。如果你需要使用自定义颜色，你可以在 `tailwind.config.js` 文件中进行配置并创建一个自定义工具类。

### Short answer

change `h-screen` to `min-h-screen`.

* * *

### But why?

> `h-screen` :takes height of the viewport.

#### What happens when scrolled ?

     Now the `total height` is `viewport height + scrolled height`
                                    👆                  👆
                                   h-screen           extra height
    

So it doesn't expand itself to have height of the entire screen during scroll, So this can be overcomed by using `min-h-screen`, meaning minimum should be the viewport height and in the occurance of scroll , expand yourself to have maximum possible height.

TailwindCSS 如何设置整个页面的背景色？

TailwindCSS中如何使 @apply 适用于自定义 CSS 类？,在 TailwindCSS 中，使用 `@apply` 指令可以在你的自定义CSS中应用 Tailwind 的实用工具类。要使用 `@apply` 使其适用于自定义CSS类，你需要在CSS文件中创建一个自定义类并使用 `@apply` 指令来添加所需的 Tailwind 实用工具类。

下面是一个示例，展示如何在 TailwindCSS 项目中通过 `@apply` 指令将多个实用工具类应用到一个自定义CSS类：

```css
/* 引入 Tailwind 的基础样式 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 创建一个自定义的CSS类 */
.btn-custom {
  @apply bg-blue-500 text-white py-2 px-4 rounded;
}

/* 或者你也可以在响应式设计中使用它 */
.btn-responsive {
  @apply px-4 py-2;
  @apply md:px-6 md:py-3;
}
```

在这个例子中，`.btn-custom` 类将具有蓝色背景、白色文本、垂直间距 `py-2`、水平间距 `px-4`，以及圆角。`.btn-responsive` 类在移动端和桌面端有不同的内边距设置，使用 `md:` 前缀表示在中等断点（即桌面设备）时生效的样式。

请注意，使用 `@apply` 时，应该遵循一些规则：
- `@apply` 不能与复杂的选择器一起使用，例如伪类或媒体查询中的嵌套选择器。
- 只能在 CSS 规则的顶层使用 `@apply`，不能在 CSS 规则内的嵌套规则中使用。
- 不能在使用 `@apply` 的同一个规则中写入其他CSS声明，除非它们是 Tailwind 的自定义实用工具或组件。

确保在实际项目中，你已经安装了TailwindCSS并且正确配置了它的构建过程，因为TailwindCSS需要通过其构建工具来处理 `@apply` 指令。

如果没有看到您的环境或您收到的错误，我无法确定，但[规避这些问题的记录方法](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css)是在 tailwind 配置文件中定义您的类：

    // tailwind.config.cjs
    const plugin = require('tailwindcss/plugin')
    
    module.exports = {
      // ...
    
      plugins: [
        plugin(function ({ addComponents, theme }) {
          addComponents({
            '.will-change-trans': { // `will-change-transform` is now included in Tailwind CSS 3.0 so using alternative class name for this example
              willChange: 'transform'
            },
            '.ease': {
              transition: 'ease'
            },
          })
        })
      ]
    
    }
    

然后你可以在任何地方@apply这些类，就像它们是内置的一样。

（我意识到这个问题可能不再与您相关，但我在搜索时发现了它，所以这适用于其他偶然发现这个问题的人！）

Tailwindcss 如何自定义 css 类？

在Tailwind CSS中，创建一个三角形通常涉及到利用边框属性来实现。三角形的形成其实是利用了一个小技巧：当一个元素的宽度和高度被设置为0，同时它的边框被设置不同的颜色，其中三个边框透明，另一个边框设置颜色时，这个元素就会看起来像是一个三角形。

下面是一个具体的步骤和代码示例，展示如何使用Tailwind CSS来创建一个向上指的三角形：

1. 创建一个div，给它一个宽度和高度都为0的类。
2. 应用边框宽度类到这个div上，这个宽度将决定了三角形的大小。
3. 给div的三个边框设置透明颜色，给剩下的一个边框设置一个实际的颜色。

以下是一个实现上述步骤的Tailwind CSS代码示例：

```html

<div class="w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-indigo-600"></div>
```

在这个例子中：

- `w-0` 和 `h-0` 类设置元素宽度和高度为0。
- `border-l-8` 和 `border-r-8` 类设置左右边框宽度为8个单位，这里的单位根据你的Tailwind CSS配置而定，通常是以px为单位。
- `border-b-8` 类设置下边框宽度，这个宽度实际上决定了三角形的大小。
- `border-l-transparent` 和 `border-r-transparent` 类将左右边框设置为透明。
- `border-b-indigo-600` 类设置下边框颜色为indigo（靛蓝色），这将成为三角形的颜色。

可以根据你的需求调整边框的宽度和颜色类，来改变三角形的大小和颜色。如果你需要不同方向的三角形（向下、向左、向右指的三角形），只需调整哪个边框是可见的，哪三个是透明的即可。

您可以尝试使用转换：

显示代码片段

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <div class="w-16 overflow-hidden inline-block">
     <div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
    </div>
    
    <div class="w-16 overflow-hidden inline-block">
     <div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
    </div>
    
    <div class="w-11  overflow-hidden inline-block">
     <div class=" h-16  bg-black -rotate-45 transform origin-top-right"></div>
    </div>
    
    <div class="w-11  overflow-hidden inline-block">
     <div class=" h-16  bg-black rotate-45 transform origin-top-left"></div>
    </div>
    
    <div class="w-11  overflow-hidden inline-block">
     <div class=" h-16  bg-black -rotate-45 transform origin-bottom-right"></div>
    </div>
    
    <div class="w-11  overflow-hidden inline-block">
     <div class=" h-16  bg-black rotate-45 transform origin-bottom-left"></div>
    </div>
    
    <div class="w-11  overflow-hidden inline-block">
     <div class=" h-16  bg-black -rotate-45 transform origin-top-left"></div>
    </div>
    
    <div class="w-11  overflow-hidden inline-block">
     <div class=" h-16  bg-black rotate-45 transform origin-top-right"></div>
    </div>

Run code snippetHide results

Expand snippet

但仅使用 CSS 会更容易。您所需要的只是两个属性，您可以从这里获取许多三角形的代码： https: [//css-generators.com/triangle-shapes/](https://css-generators.com/triangle-shapes/)

您也可以尝试使用边框

[顺风游乐场](https://play.tailwindcss.com/RCiIARRSxx)

    
    <div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>
    
    <div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>
    
    <div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>
    
    <div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div>

通过伪元素（小三角形）：

    <script src="https://cdn.tailwindcss.com"></script>
    <div>small triangle:</div>
    <div class="flex gap-x-1">
      <div class="before:content-['▴']"></div>
      <div class="before:content-['▾']"></div>
      <div class="before:content-['◂']"></div>
      <div class="before:content-['▸']"></div>
    </div>

运行代码片段Hide results

展开片段

* * *

通过伪元素（普通三角形）：

    <script src="https://cdn.tailwindcss.com"></script>
    
    <div>normal triangle:</div>
    <div class="flex gap-x-1">
      <div class="before:content-['▲']"></div>
      <div class="before:content-['▼']"></div>
      <div class="before:content-['◀']"></div>
      <div class="before:content-['▶']"></div>
    </div>

运行代码片段Hide results

展开片段

* * *

按边界：

    <script src="https://cdn.tailwindcss.com"></script>
    <div>triangle by border</div>
    <div class="flex gap-x-3">
      <div class="w-0 h-0 border-8 border-solid border-transparent border-b-black"></div>
      <div class="w-0 h-0 border-8 border-solid border-transparent border-t-black"></div>
      <div class="w-0 h-0 border-8 border-solid border-transparent border-r-black"></div>
      <div class="w-0 h-0 border-8 border-solid border-transparent border-l-black"></div>
    </div>

运行代码片段Hide results

展开片段

* * *

按边界（简化）：

    <script src="https://cdn.tailwindcss.com"></script>
    
    <div>triangle by border (simplify)</div>
    <style type="text/tailwindcss">
      @layer components { .triangle { @apply w-0 h-0 border-8 border-solid border-transparent } }
    </style>
    <div class="flex gap-x-3">
      <div class="triangle border-b-black"></div>
      <div class="triangle border-t-black"></div>
      <div class="triangle border-r-black"></div>
      <div class="triangle border-l-black"></div>
    </div>

运行代码片段Hide results

展开片段

也许您想使用三角形作为工具提示。（这样的搜索让我来到这里）：

[![在此输入图像描述](https://i.stack.imgur.com/BNxlB.png)](https://i.stack.imgur.com/BNxlB.png)

    <div class="group relative mt-4 ml-4 inline-block">
      <button type="button" class="rounded-md border border-neutral-600 px-1">...</button>
    
      
      <div class="invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible">
         <div class="ml-2 -mb-[1px] inline-block overflow-hidden"> 
            
          <div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div>
        </div>
    
        
        <div class="flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1">
          <div class="cursor-pointer hover:underline">Do amazing stuff</div>
          <div class="cursor-pointer hover:underline">Go back</div>
        </div>
      </div>
    </div>
    

[play.tai​​lwindcss.com 上的演示](https://play.tailwindcss.com/KO8cXX7sBN)

基于：

*   @temani-afif[答案](https://stackoverflow.com/a/67133568/1154773)
*   [https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md](https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md)

TailwindCSS 如何实现一个三角形？

在使用TailwindCSS时，您可以通过在`tailwind.config.js`文件中扩展它的默认主题来创建自定义百分比的`padding`类。Tailwind 已经为您提供了一组预定义的`padding`工具类，但如果您需要使用特定的百分比值来设置`padding`，您可以按照以下步骤操作：

1. 打开您的项目中的`tailwind.config.js`文件。
2. 定位到`theme`部分。
3. 扩展`padding`属性以包含您希望使用的百分比值。

以下是一个具体的例子：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      padding: {
        '5p': '5%',   // 创建一个名为 'p-5p' 的工具类，对应 5% 的 padding
        '10p': '10%', // 创建一个名为 'p-10p' 的工具类，对应 10% 的 padding
        // 你可以继续添加更多自定义的百分比
      }
    }
  },
  variants: {},
  plugins: [],
}
```

在上面的配置中，我们添加了两个自定义的`padding`百分比类：`p-5p`和`p-10p`。现在，您可以在您的HTML中使用这些类，就像使用Tailwind的其他工具类一样。

例如：

```html
<div class="p-5p bg-gray-200">这个盒子有5%的padding</div>
<div class="p-10p bg-gray-300">这个盒子有10%的padding</div>
```

在上述的HTML代码中，第一个`div`将会有等于其宽度5%的`padding`，第二个`div`将会有等于其宽度10%的`padding`。

请注意，当您添加自定义配置时，最好遵守Tailwind的命名约定，即`p-{size}`用于`padding`，`m-{size}`用于`margin`等等，以保持一致性和可预测性。同时，确保在项目构建过程中，您的`tailwind.config.js`文件被正确引入和处理，以便生成相应的CSS。

虽然其他答案确实提供了答案，但如果您只需要使用自定义值一次，这可能会令人沮丧。我在尝试解决这样的问题时找到了这个答案，因此对于那些在我之后发现这个问题的人来说， tailwind 现在支持[任意值](https://tailwindcss.com/docs/padding#arbitrary-values)。

您可以通过将包含 CSS 值（例如 ）的方括号附加`[80%]`到前缀（例如`p-`用于 padding 或`mr-`margin-right）来使用它们。

    <div class="p-[80%]">
        Hello world!
    </div>

对于 Tailwind，您不需要转义百分号，它会处理这个问题。这是一个播放示例[https://play.tai​​lwindcss.com/CYR6JOXYyz?file=config](https://play.tailwindcss.com/CYR6JOXYyz?file=config)

    theme: {
      extend: {
        spacing: {
          '80%': '80%', // p-80% - should work
        }
      },
    },
    

`.p-80\%`Tailwind 将为上述配置创建类。

我发现使用间距可以[一次性自定义更多的内容：内边距、](https://tailwindcss.com/docs/padding#padding-scale)_边距、宽度和高度_[](https://tailwindcss.com/docs/padding#padding-scale)

代码

    const defaultTheme = require('tailwindcss/defaultTheme')
    
    module.exports = {
      theme: {
         extend: {
          padding: {
            'p-80': '80%',
          },
          // Build your palette here
              colors: {
          'black': '#393939',
        }
      }
      }
    }
    

标记

    <a href="#" class="p-80">TailWindCSS Dev</a>

TailwindCSS 如何使用自定义百分比设置盒子模型的 padding？

在 Tailwind CSS 中，某些类名包含一个反斜线 (`\`) 是因为它们用来转义 HTML 和 CSS 中的特殊字符，以确保类名是有效的。

例如，在 Tailwind CSS 中，你可能会看到像 `md\:bg-red-500` 这样的类名。这里的反斜杠是用来转义冒号 (`:`)，因为在不同的断点上应用样式时，Tailwind 使用冒号来作为前缀。直接在 CSS 类名中使用冒号是不合法的，所以它必须被转义。

这里是一些为什么要使用转义字符的例子：

- **响应式前缀**: 如 `sm:`, `md:`, `lg:`, `xl:` 等，用于在不同的屏幕尺寸下应用样式。
- **状态变量前缀**: 如 `hover:`, `focus:`, `active:` 等，用于定义某个状态下的样式。
- **分数**: 如 `w-1/2`，在这个类名中，`1/2` 表示宽度为容器的一半，`/` 被转义以防止与 CSS 语法冲突。
- **负数值**: 如 `-mt-4`，用于表示负的 `margin-top`。在这个类名中，`-` 被转义以确保类名的有效性。

在你编写 HTML 时，不需要添加反斜杠；这些只是在 Tailwind CSS 的配置和生成的 CSS 文件中使用。当你在 HTML 使用这些类时，应当这样写：

```html
<div class="md:bg-red-500"></div>
```

而不是：

```html
<div class="md\:bg-red-500"></div>
```

总之，反斜线在 Tailwind CSS 类名中的使用是为了确保包含特殊字符的类名在 CSS 文件中是合法和有效的。

Tailwind 使用带有冒号的类名作为其对响应式设计支持的一部分。特别是类名，例如

    tablet:bold
    

`bold`意味着应该应用类中定义的属性，但前提是媒体与定义为 的媒体查询匹配`tablet`。

冒号是 HTML5 类名中完全有效的字符。然而，它是 CSS 选择器中的保留字符。因此，如果要选择名称中包含冒号的类的元素，则需要转义冒号。

所以，如果你有这样的 HTML：

    <p class="one:two"></p>
    

如果您想要选择该元素，相应的查询选择器将类似于：

    .one\:two

TailwindCSS 中某些类名为什么有反斜杠\？

要在TailwindCSS中实现下划线悬停动画，我们可以利用其类的实用性和定制性。下面是一个基本示例，展示了如何创建一个当鼠标悬停时逐渐出现下划线的动画：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 下划线悬停动画</title>

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">

<style>
  /* 在Tailwind配置中扩展这些类 */
  .hover-underline-animation {
    display: inline-block;
    position: relative;
    color: #3490dc;
    text-decoration: none;
  }

  .hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3490dc;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }

  .hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
</style>
</head>
<body class="flex items-center justify-center h-screen">
  
  <a href="#" class="hover-underline-animation text-xl">
    悬停我查看下划线动画
  </a>
</body>
</html>
```

在上述代码中，我们定义了一个`hover-underline-animation`类，可以添加到任何你想要应用悬停下划线动画的元素上。这个类使用了伪元素`:after`来在悬停时显示下划线，并通过`transform`属性来控制下划线的动画效果。使用`transition`属性让动画平滑进行。

当然，你也可以使用TailwindCSS的`@apply`指令来在CSS中直接应用Tailwind的工具类，或者通过TailwindCSS的配置文件`tailwind.config.js`来扩展你的类。这些方式可以让你保持CSS的一致性并充分利用TailwindCSS提供的功能。

您可以使用组 max-w-{x} 和transition-all 在纯 TailwindCSS 中实现这一点，在跨度上使用组悬停，这样当您经过链接时它就会启动动画

```
<a href="#" class="group text-sky-600 transition duration-300">
Link
<span class="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600"></span>
</a>
```

如果您不想仅包含用于此功能的 CSS 文件，或者您只想在 Tailwind 中执行此操作 - 我在下面发布的代码片段纯粹基于 Tailwind CSS。

    <a class="group text-pink-500 transition-all duration-300 ease-in-out" href="#">
      <span class="bg-left-bottom bg-gradient-to-r from-pink-500 to-pink-500 bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out">
        This text gets 'underlined' on hover
      </span>
    </a>
    

干杯，编码愉快！

你可以为此过渡：

        .link-underline {
            border-bottom-width: 0;
            background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
            background-size: 0 3px;
            background-position: 0 100%;
            background-repeat: no-repeat;
            transition: background-size .5s ease-in-out;
        }
    
        .link-underline-black {
            background-image: linear-gradient(transparent, transparent), linear-gradient(#F2C, #F2C)
        }
    
        .link-underline:hover {
            background-size: 100% 3px;
            background-position: 0 100%
        }

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
        <div class="relative py-3 sm:max-w-xl sm:mx-auto">
            <a href="#" class="font-display max-w-sm text-2xl font-bold leading-tight">
                <span class="link link-underline link-underline-black text-black"> Link Hover Effect </span>
            </a>
        </div>
    </div>

运行代码片段Hide results

展开片段

您可以使用伪元素在一行中完成所有操作`after`：

    <section class="bg-[#0077b6] h-screen w-screen text-white flex items-center justify-center">
      <a class="text-3xl relative after:bg-white after:absolute after:h-1 after:w-0 after:bottom-0 after:left-0 hover:after:w-full after:transition-all after:duration-300 cursor-pointer">Text you want to underline in just one line</a>
    </section>
    

这是一支带有用例的笔：

[https://codepen.io/Marcos-Riverola/pen/poQmRKV?editors=1010](https://codepen.io/Marcos-Riverola/pen/poQmRKV?editors=1010)

如何在 tailwindcss 中使用下划线悬停动画

当您想要在 Tailwind CSS 中创建多个主题时，可以使用几种不同的方法，例如利用 Tailwind CSS 的官方插件或利用其内建的工具如变体(variants)和配置文件。以下是一个具体的步骤示例：

### 使用 Tailwind CSS 官方插件：`@tailwindcss/custom-forms`

1. **安装插件**：
   首先，您需要安装这个插件。如果您还没有安装 Tailwind CSS，请先安装它。

   ```shell
   npm install tailwindcss @tailwindcss/custom-forms
   ```

2. **在配置文件中引入插件**：
   在 `tailwind.config.js` 文件中引入这个插件。

   ```javascript
   // tailwind.config.js
   module.exports = {
     // ...
     plugins: [
       // ...
       require('@tailwindcss/custom-forms'),
     ],
   };
   ```

3. **配置多个主题**：
   Tailwind CSS 使用类名前缀来创建多个主题，您可以在配置文件中自定义这些前缀。

   ```javascript
   // tailwind.config.js
   module.exports = {
     // ...
     darkMode: 'class', // or 'media' if you prefer to use media queries
     theme: {
       extend: {
         // Define the colors for the light theme
         colors: {
           theme1: {
             'primary': '#...', // Define primary color
             'secondary': '#...', // Define secondary color
             // ... more colors
           },
           // Define the colors for the dark theme
           theme2: {
             'primary': '#...', // Define primary color
             'secondary': '#...', // Define secondary color
             // ... more colors
           },
         },
       },
     },
     variants: {
       // Define which utilities should be generated for your themes
       extend: {
         backgroundColor: ['theme1', 'theme2'],
         borderColor: ['theme1', 'theme2'],
         textColor: ['theme1', 'theme2'],
         // ... other utilities
       },
     },
   };
   ```

4. **使用主题相关的类名**：
   在您的 HTML 或模板文件中，根据需要使用相应的类名来切换主题。

   ```html
   
   <button class="bg-theme1-primary text-white">
     Theme 1 Button
   </button>

   
   <button class="bg-theme2-primary text-white">
     Theme 2 Button
   </button>
   ```

### 利用 CSS 变量和 JavaScript 控制主题

另一种方式是使用 CSS 变量来定义颜色，然后使用 JavaScript 来切换这些变量的值。

1. **定义 CSS 变量**：
   在您的 CSS 文件中，您可以这样定义主题颜色：

   ```css
   :root {
     --primary-color: #...; /* 默认主题颜色 */
     --secondary-color: #...;
     /* ... */
   }
   .theme1 {
     --primary-color: #...; /* 主题1颜色 */
     --secondary-color: #...;
     /* ... */
   }
   .theme2 {
     --primary-color: #...; /* 主题2颜色 */
     --secondary-color: #...;
     /* ... */
   }
   ```

2. **在 HTML 中使用 CSS 变量**：

   ```html
   <button style="background-color: var(--primary-color); color: white;">
     Theme Button
   </button>
   ```

3. **使用 JavaScript 切换主题**：
   您可以根据用户的选择或某些条件来使用 JavaScript 切换主题。

   ```javascript
   // 切换到主题1
   document.documentElement.classList.add('theme1');
   document.documentElement.classList.remove('theme2');

   // 切换到主题2
   document.documentElement.classList.add('theme2');
   document.documentElement.classList.remove('theme1');
   ```

使用上述方法，您可以根据需要创建并切换不同的主题。这可以通过类名控制，CSS 变量，甚至可以用 JavaScript 动态切换，以满足更复杂的应用场景。除了使用官方插件和 CSS 变量以外，还有一种方法是直接在 Tailwind CSS 的配置文件中使用 JavaScript 来动态生成主题。这种方法通常涉及条件逻辑和自定义函数，使得配置更灵活。

### 使用 JavaScript 动态生成主题

1. **配置多个主题**：
   在 Tailwind 的配置文件中，您可以使用 JavaScript 来根据不同的条件动态生成主题配置。

   ```javascript
   // tailwind.config.js
   function generateTheme(themeName) {
     return {
       'primary': themeName === 'theme1' ? '#...' : '#...',
       'secondary': themeName === 'theme1' ? '#...' : '#...',
       // ...
     };
   }

   module.exports = {
     theme: {
       extend: {
         colors: {
           theme1: generateTheme('theme1'),
           theme2: generateTheme('theme2'),
         },
         // ...
       },
     },
     // ...
   };
   ```

2. **应用主题相关的类名**：
   在您的 HTML 或模板文件中，根据需要使用相应的类名来应用不同的主题。

   ```html
   
   <div class="theme1:primary">This text uses the primary color of theme 1</div>
   
   <div class="theme2:primary">This text uses the primary color of theme 2</div>
   ```

### 使用插件创建基于条件的主题

Tailwind CSS 允许开发者编写自定义插件，这意味着您可以创建一个插件来根据特定条件或环境变量来生成主题。

1. **编写自定义插件**：
   创建一个新的 JavaScript 文件来编写您的插件逻辑。

   ```javascript
   // plugins/themePlugin.js
   module.exports = function({ addBase, config }) {
     const theme = config('themeName');
     addBase({
       h1: { color: config(`theme.${theme}.primary`) },
       // ...其他基础样式
     });
   };
   ```

2. **在配置文件中引入自定义插件**：
   修改您的 `tailwind.config.js` 文件以包含您的插件，并传递所需的配置。

   ```javascript
   // tailwind.config.js
   const themePlugin = require('./plugins/themePlugin');

   module.exports = {
     themeName: 'theme1', // 或者 'theme2', 可能来自环境变量或其他逻辑
     // ...
     plugins: [
       themePlugin,
       // ...其他插件
     ],
     // ...
   };
   ```

### 结合使用 Tailwind CSS 和其它 CSS 方法

在实际项目中，Tailwind CSS 可以与其他 CSS 方法(如 CSS-in-JS 或者传统的样式表)结合使用。例如，您可以使用 Tailwind 的实用类来处理大部分样式，同时使用组件级别的样式表来管理特定的主题样式。

在以上所有情况中，关键是理解 Tailwind 的配置方式和类生成机制。您可以根据项目需求灵活搭配不同的方法，创建符合设计需求的多主题界面。

我确实找到了使用 CSS 变量的解决方案。

在 CSS 文件中，您可以为每个主题定义样式，如下所示

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base {
      html[data-theme='default'] {
        --color-esther: 34, 39, 46;
        --color-maximus: 45, 51, 59;
        --color-linx: 55, 62, 71;
      }
    
      html[data-theme='neon'] {
        --color-esther: 20, 61, 42;
        --color-maximus: 13, 82, 66;
        --color-linx: 20, 82, 11;
      }
    }
    

然后在你的`tailwind.config.js`文件中你可以这样定义它们

**顺风版本^3.1**

    module.exports = {
      theme: {
        colors: {
          esther: 'rgb(var(--color-esther) / <alpha-value>)',
          maximus: 'rgb(var(--color-maximus) / <alpha-value>)',
          linx: 'rgb(var(--color-linx) / <alpha-value>)',
        },
      },
    }
    

**Tailwind 低于 3.1 版本**

    function withOpacity(cssVariable) {
      return ({ opacityValue }) => {
        return opacityValue ? `rgba(var(${cssVariable}), ${opacityValue})` : `rgb(var(${cssVariable}))`
      }
    }
    
    module.exports = {
      theme: {
        colors: {
          esther: withOpacity('--color-esther'),
          maximus: withOpacity('--color-maximus'),
          linx: withOpacity('--color-linx'),
        },
      },
    }
    

在 HTML 中，您可以像这样使用这些类：

    <html lang="en" data-theme="default">
      <body class="bg-esther text-optimus cursor-default"></body>
    </html>

[tw-colors](https://www.npmjs.com/package/tw-colors)正是这样做的。

_tailwind.config.js_

    const { createThemes } = require('tw-colors');
    
       module.exports = {
          content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
          plugins: [
             createThemes({
                halloween: { 
                   'primary': 'orange',
                   'secondary': 'yellow',
                },
                summer: { 
                   'primary': 'pink',
                   'secondary': 'red',
                },
                winter: { 
                   'primary': 'blue',
                   'secondary': 'green',
                },
                party: { 
                   'primary': 'steelblue',
                   'secondary': 'darkblue',
                },
             })
          ],
       };
    

在类中使用这样的主题：

    <html class='theme-halloween'>
          ...
    </html>
    

或者使用数据属性：

    <html data-theme='halloween'>
          ...
    </html>
    

然后像平常一样使用顺风课程。具有该类的按钮`bg-primary`将根据最接近的主题改变颜色。

可以使用一些切换按钮或您喜欢的任何内容动态切换主题

有几个插件支持定义多个 Tailwind 主题并在它们之间进行切换。我特别喜欢[tailwindcss-themer 插件，](https://github.com/RyanClementsHax/tailwindcss-themer)因为它允许您：

*   只需在任何组件（通常是顶级组件）上添加带有主题名称的 css 类即可切换主题
*   像平常一样使用 CSS 类（例如`text-primary`）。这使代码保持干净并且独立于插件（与其他插件相反，其他插件有时需要每个 CSS 类都有特定的前缀）
*   使用变体进一步微调样式，例如`my-theme:font-bold`

只是偶然发现了这个问题，因为我正在做与几年前相同的事情，但我不记得了。如果有人再次来到这里，也许这个答案可能会有所帮助。

在我们的例子中，我们正在构建一个应用于 3 个不同网站的主题，但明显改变了颜色和字体，这似乎与问题作者的情况相同。

为此，可以使用[顺风预设。](https://tailwindcss.com/docs/presets)我有一个`tailwind.preset.js`基本上是默认的顺风配置，具有所有基色、间距等。对于每个主题，`tailwind.<theme-name>.js`都会设置一个单独的主题，其中包含更改并基于预设。

例子`tailwind.theme-one.js`：

    module.exports = {
      presets: [
        require('./tailwind.preset.js')
      ],
      theme: {
        colors: {
          # color changes go here
        }
      }
    }
    

我们设置了一个 gulp 工作流程，基本上只为每个主题配置渲染一次主 scss 文件。在集成上，随后将加载所需的主题文件。

当您想要在 Tailwind CSS 中创建多个主题时，可以使用几种不同的方法，例如利用 Tailwind CSS 的官方插件或利用其内建的工具如变体(variants)和配置文件。以下是一个具体的步骤示例：

### 使用 Tailwind CSS 官方插件：`@tailwindcss/custom-forms`

1. **安装插件**：
   首先，您需要安装这个插件。如果您还没有安装 Tailwind CSS，请先安装它。

   ```shell
   npm install tailwindcss @tailwindcss/custom-forms
   ```

2. **在配置文件中引入插件**：
   在 `tailwind.config.js` 文件中引入这个插件。

   ```javascript
   // tailwind.config.js
   module.exports = {
     // ...
     plugins: [
       // ...
       require('@tailwindcss/custom-forms'),
     ],
   };
   ```

3. **配置多个主题**：
   Tailwind CSS 使用类名前缀来创建多个主题，您可以在配置文件中自定义这些前缀。

   ```javascript
   // tailwind.config.js
   module.exports = {
     // ...
     darkMode: 'class', // or 'media' if you prefer to use media queries
     theme: {
       extend: {
         // Define the colors for the light theme
         colors: {
           theme1: {
             'primary': '#...', // Define primary color
             'secondary': '#...', // Define secondary color
             // ... more colors
           },
           // Define the colors for the dark theme
           theme2: {
             'primary': '#...', // Define primary color
             'secondary': '#...', // Define secondary color
             // ... more colors
           },
         },
       },
     },
     variants: {
       // Define which utilities should be generated for your themes
       extend: {
         backgroundColor: ['theme1', 'theme2'],
         borderColor: ['theme1', 'theme2'],
         textColor: ['theme1', 'theme2'],
         // ... other utilities
       },
     },
   };
   ```

4. **使用主题相关的类名**：
   在您的 HTML 或模板文件中，根据需要使用相应的类名来切换主题。

   ```html
   
   <button class="bg-theme1-primary text-white">
     Theme 1 Button
   </button>

   
   <button class="bg-theme2-primary text-white">
     Theme 2 Button
   </button>
   ```

### 利用 CSS 变量和 JavaScript 控制主题

另一种方式是使用 CSS 变量来定义颜色，然后使用 JavaScript 来切换这些变量的值。

1. **定义 CSS 变量**：
   在您的 CSS 文件中，您可以这样定义主题颜色：

   ```css
   :root {
     --primary-color: #...; /* 默认主题颜色 */
     --secondary-color: #...;
     /* ... */
   }
   .theme1 {
     --primary-color: #...; /* 主题1颜色 */
     --secondary-color: #...;
     /* ... */
   }
   .theme2 {
     --primary-color: #...; /* 主题2颜色 */
     --secondary-color: #...;
     /* ... */
   }
   ```

2. **在 HTML 中使用 CSS 变量**：

   ```html
   <button style="background-color: var(--primary-color); color: white;">
     Theme Button
   </button>
   ```

3. **使用 JavaScript 切换主题**：
   您可以根据用户的选择或某些条件来使用 JavaScript 切换主题。

   ```javascript
   // 切换到主题1
   document.documentElement.classList.add('theme1');
   document.documentElement.classList.remove('theme2');

   // 切换到主题2
   document.documentElement.classList.add('theme2');
   document.documentElement.classList.remove('theme1');
   ```

使用上述方法，您可以根据需要创建并切换不同的主题。这可以通过类名控制，CSS 变量，甚至可以用 JavaScript 动态切换，以满足更复杂的应用场景。
除了使用官方插件和 CSS 变量以外，还有一种方法是直接在 Tailwind CSS 的配置文件中使用 JavaScript 来动态生成主题。这种方法通常涉及条件逻辑和自定义函数，使得配置更灵活。

### 使用 JavaScript 动态生成主题

1. **配置多个主题**：
   在 Tailwind 的配置文件中，您可以使用 JavaScript 来根据不同的条件动态生成主题配置。

   ```javascript
   // tailwind.config.js
   function generateTheme(themeName) {
     return {
       'primary': themeName === 'theme1' ? '#...' : '#...',
       'secondary': themeName === 'theme1' ? '#...' : '#...',
       // ...
     };
   }

   module.exports = {
     theme: {
       extend: {
         colors: {
           theme1: generateTheme('theme1'),
           theme2: generateTheme('theme2'),
         },
         // ...
       },
     },
     // ...
   };
   ```

2. **应用主题相关的类名**：
   在您的 HTML 或模板文件中，根据需要使用相应的类名来应用不同的主题。

   ```html
   
   <div class="theme1:primary">This text uses the primary color of theme 1</div>
   
   <div class="theme2:primary">This text uses the primary color of theme 2</div>
   ```

### 使用插件创建基于条件的主题

Tailwind CSS 允许开发者编写自定义插件，这意味着您可以创建一个插件来根据特定条件或环境变量来生成主题。

1. **编写自定义插件**：
   创建一个新的 JavaScript 文件来编写您的插件逻辑。

   ```javascript
   // plugins/themePlugin.js
   module.exports = function({ addBase, config }) {
     const theme = config('themeName');
     addBase({
       h1: { color: config(`theme.${theme}.primary`) },
       // ...其他基础样式
     });
   };
   ```

2. **在配置文件中引入自定义插件**：
   修改您的 `tailwind.config.js` 文件以包含您的插件，并传递所需的配置。

   ```javascript
   // tailwind.config.js
   const themePlugin = require('./plugins/themePlugin');

   module.exports = {
     themeName: 'theme1', // 或者 'theme2', 可能来自环境变量或其他逻辑
     // ...
     plugins: [
       themePlugin,
       // ...其他插件
     ],
     // ...
   };
   ```

### 结合使用 Tailwind CSS 和其它 CSS 方法

在实际项目中，Tailwind CSS 可以与其他 CSS 方法(如 CSS-in-JS 或者传统的样式表)结合使用。例如，您可以使用 Tailwind 的实用类来处理大部分样式，同时使用组件级别的样式表来管理特定的主题样式。

在以上所有情况中，关键是理解 Tailwind 的配置方式和类生成机制。您可以根据项目需求灵活搭配不同的方法，创建符合设计需求的多主题界面。

Tailwind CSS相关问题