Tailwind CSS 是一个用于构建 Web 项目的 CSS 框架，它提供了一系列预定义的原子CSS类，可以帮助开发人员快速构建 Web 界面，并且可以通过自定义主题和扩展来满足不同的需求。一个用 Tailwind 编写的 HTML 代码一般长这样。
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512" />可以看出，Tailwind提供了各种 CSS 工具集，方便我们快速编写样式，每个工具类都是语义化，方便我们快速上手，如果你想尝试下自己体验下编写 Tailwind ，可以进入 Tailwind Play 在线体验下。
为什么不直接用内联样式？
通常刚接触的时候，可能会觉得 Tailwind 写一大堆 class 跟一坨💩一样，还不如直接用 style 来编写，然而以下情况，内联样式是无法做到的。
设计约束
使用内联样式，每个值都是一个特殊的值，而使用原子样式，我们可以从一些预设的类中选择，这使得构建一致性UI更容易。
以下是内联样式和原子CSS的代码区别：
<button style="background-color: #3490dc; color: white; padding: 12px 24px;">Button</button>
<button class="bg-blue-500 text-white px-6 py-3">Button</button>可以看出，用原子CSS代码风格更统一。
响应式设计
使用内联样式无法实现响应式布局，需要单独在外部编码实现，而 Tailwind 可以简单做到这点。
<img class="w-16 md:w-32 lg:w-48" src="...">鼠标悬停、焦点和其他状态
内联样式不能针对悬停、焦点等状态进行样式设置，但使用 Tailwind CSS 的状态变体可以轻松地使用实用程序类为这些状态设置样式。
<button class="bg-blue-500 hover:bg-blue-400 text-white px-6 py-3">Button</button>
<!-- 主题 -->
<div class="bg-white dark:bg-slate-800></div>说了一堆废话，接下里直接进入主题，Tailwind 除了基本的一些内置样式外，还提供了很多额外的功能，例如自定义主题，插件，变体等等。
主题（Theme）
Tailwind CSS允许我们定制全局主题，例如颜色，字体，间距，透明度等等。只需要在 tailwind.config.js 配置，下面是一个完整的示例：
module.exports = {
theme: {
extend: {
colors: {
primary: '#ff7f50', // 自定义颜色名称 "primary"
secondary: '#6495ed',
blue: {
lighter: '#b3e5fc', // 修改默认蓝色调 "blue"
default: '#2196f3',
darker: '#0d47a1',
},
},
fontFamily: {
sans: ['Roboto', 'sans-serif'], // 添加一个自定义字体族 "sans"
display: ['Playfair Display', 'serif'],
},
spacing: {
'8xl': '72rem', // 添加一个新的间距大小 "8xl"
},
animation: {
fadeInUpBig: 'fadeInUpBig 1s ease both', // 添加一个自定义动画 "fadeInUpBig"
},
},
},
}变体（Variants）
除了一些基本样式之外，我们需要给元素添加状态，例如 hover，focus，active，响应式，暗黑模式等功能，这时候 variants 就可以派上用场了。Tailwind 也内置了一些 variants，例如：
<p class="bg-gray-200 hover:bg-red-500 text-black">kelen.cc</p>这段代码的 hover:bg-red-500 可以实现鼠标悬浮背景色变红。
如果内置的 variants 不满足需求，可以通过 plugin 自定义变体，例如新增一个 !important 变体。
module.exports = {
plugins: [
function importantPlugin({ addVariant, e }) {
addVariant('important', ({ container }) => {
container.walkRules(rule => {
rule.selector = `.\\!${e(rule.selector.slice(1))}`
rule.walkDecls(decl => {
decl.important = true
})
})
})
},
]
}然后在 vartains 配置项可以使用自定义的 important。
module.exports = {
variants: {
extend: {
backgroundColor: ['important'],
textColor: ['important'],
},
},
}这样使用即可：
<div class="!bg-red-500 !text-white">This has important styles!</div>推荐一款工具：Tailwind Variants，方便我们自己扩展了更多丰富的 variants，功能更加强大。
插件（Plugin）
Tailwind 提供了自定义插件来扩展默认的样式或者添加全新的实用类。在原子类不满足的情况下，我们可以自定义自己的原子类，例如创建一个 .bg-striptes ，来实现背景条纹。
// tailwind-plugins/bg-stripes.js
module.exports = function ({ addUtilities, e }) {
const newUtilities = {
[`.${e('bg-stripes')}`]: {
backgroundImage: 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)',
backgroundSize: '10px 10px',
},
}
addUtilities(newUtilities)
}在 tailwind.config.js 引入该插件。
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('./tailwind-plugins/bg-stripes'),
],
}<div class="bg-gray-200 bg-stripes"></div>插件参数
上述例子看到，插件暴露除了 addUtilities，e 函数之外，还暴露了其他的变量和函数，含义分别如下：
addBase: 添加新的基础样式，这些样式将应用于所有元素。addComponents: 添加新的可复用组件样式，如按钮、卡片、表单元素等。addVariant: 添加新的变异（variant）或者修改现有变异的行为。变异是 Tailwind CSS 中的一种功能，用于在不同的状态或条件（如 hover、focus、active、responsive 等）下应用不同的样式。e: 这是一个 helper 函数，全称为 escapeClassName。在创建类名时，使用这个函数可以确保生成的类名是安全的，不会与 Tailwind CSS 的其他类名冲突。例如，如果你想要创建一个名为 myUtility 的实用类，你应该使用 e('myUtility')，这将确保类名被正确地转义和命名。theme: 提供对当前主题配置的访问和修改。variants: 提供对当前变异配置的访问和修改。corePlugins: 提供对核心插件启用/禁用状态的访问和修改。config: 提供对完整 Tailwind CSS 配置对象的访问。
如果你自己不会写插件，这里整理了一些比较有用的插件，你可以尝试使用他们。
- 💙🧩 Typography - Adds a
proseclass for beautiful typographic defaults. - 💙💼 Container queries - Provides utilities for container queries.
- 💙 Forms - Adds better default styles to form elements.
- 🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
- 🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
- 🎨🧬 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
- 🎨🧩 Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
- 🎨🧩 CSS Variables - Exports custom CSS variables.
- 🎨💼 Accent - Adds
accentcolors for more dynamic and flexible color utilization. - 💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
- 💼 Image Rendering - Adds
image-renderingutilities. - 💼 Elevation - Adds Material UI
elevationutilities. - 💼 RFS - Adds
RFSutilities. - 💼 Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
- 💼 Background SVG - Inject SVGs as background images with color variants.
- 💼 Background Unsplash - Apply unsplash.com images as background.
- 💼 Brand Colors - Adds various brand colors for background, border and text.
- 💼 Bootstrap Grid - Generates Bootstrap's style flexbox grid system.
- 💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
- 💼 Scrollbar Hide - Adds
scrollbar-hideclass for visual hide scrollbar. - 💼 Fluid Type - Adds fluid type (
font-size) utilities. - 💼 Grid Areas - Adds
grid-areasandgrid-areautilities. - 💼 Full bleed background and borders - Provides utilities for extended backgrounds and borders.
- 💼 CSS Filter Order - Adds
filter-orderutilities for changing the order of filters in the generated CSS. - 💼 Tailwind CSS 3D - Adds 3D
transformutilities and animations. - 💼 Claymorphism - Adds
clayutilities for creating claymorphism style. - 🧬 FormKit - Adds variants for input and form states for FormKit.
- 🧬 Htmx - Adds variants for styling on htmx events.
- 🧩 Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
- 🛑💼💙 Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
- 🛑🧩💙 Custom Forms - Adds better default styles to form elements.
- 🛑💙💼 Aspect Ratio - Adds composable aspect ratio utilities.
