介绍

Tailwind CSS 是当前最流行的样式框架，拥有良好的生态。它提供了 css 基础工具类，可在 html 标签中完成样式代码编写。

官方网站： https://tailwindcss.com/

优势

它有许多优势：

• 免去写 CSS 类名
• 将结构与样式集中在 HTML 部分
• 可通过封装组件、@apply 方式实现类名复用
• 有效减少 CSS 体积

另外，它在 AIGC 方面很友好：

• GPT 已很好地掌握 Tailwind CSS 相关内容，可进行答疑与修改代码等。比起 HTML + CSS，Tailwind CSS 语句更短、更方便。
• 最近新推出的很多 AI 生成前端代码的框架、仓库，生成的代码也是基于 Tailwind CSS。

生态

有很多的 Tailwind 资源，它们提供了可直接复制代码的组件与模板，这些资源也可以为设计页面提供灵感。其中部分是收费组件与模板。

• Tailwind UI
• Tailwind Toolbox
• shadcn/ui
• Next UI
• DaisyUI
• Kometa UI Kit
• tailspark
• LoFi UI - CodePen
• Meraki UI
• TailBlocks
• Creative Tim Tailwind Templates
• …

这个资源实在是太多了，可以在 https://www.tailwindawesome.com/?price=free&type=all 中找到更多的资源，或者从搜索引擎搜索。

环境

playground

https://play.tailwindcss.com/

可在官方的在线编辑器所见即所得的编码，然后复制到项目中。

IDE

配置 IDE 后，类名可以有很好的智能提示，也能同时显示类名对应的 css 代码。

• VSCode 可安装 Tailwind CSS IntelliSense 插件。插件可以一直启用，它会以 tailwind 配置文件来决定是否生效功能。需增加一些 vscode 配置：

"tailwindCSS.includeLanguages": {
  "javascript": "javascript",
  "html": "HTML"
},
"editor.quickSuggestions": {
  "strings": true
},

• WebStorm 已有开箱即用的支持

配置

为项目配置启用 Tailwind

各框架中的创建方式：

https://tailwindcss.com/docs/installation/framework-guides

类排序格式化

官方提供了 prettier-plugin-tailwindcss 插件，可用于排序。可通过 prettier 结合 eslint 实现一体化控制。

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

常用特性

Tailwind 有一些定义的语法

• important 属性，在前面加叹号 !tw-bottom
• 负属性，在前面加减号 -tw-bottom-5
• 设置无法控制子类样式时使用 *: 修饰符
• 媒体查询断点： sm md lg xl 2xl

自定义的状态修饰符：

• group 群组，支持命名或使用其他类名作为分组依据；使用 group-* 去控制整个组的状态生效时的效果，如 group-hover: 控制组被 hover 的效果。
• peer 标记前面的元素，然后 peer-disabled 是当前面元素 disabled 时本元素的样式，同样可以命名和用自定义类名

少量自定义概念的工具类:

• container 容器，默认最大到各个断点的宽度，可结合 mx-auto 使用
• divide 分割线

常见问题

避免样式冲突

• 类名冲突：可以在 tailwind.config.js 中增加 prefix 标识，这样使用原子 class 时都要加上 prefix 标识。与其他 UI 库混用或者在现有项目使用 Tailwind 时优先增加类名前缀。
• 基础样式冲突：Tailwind 有一些基础样式，这可能与其他 UI 库产生基础冲突，主要是样式优先级的问题。
  • 如果与其他 UI 库产生基础冲突，可关闭 tailwind 的基础样式，把 corePlugins.preflight 设置为 false。可以再手动引入 tailwind 的基础样式，解决冲突的部分。
  • 未使用preflight 的样式使用可能有影响，如 border 相关的功能需要编写额外的原子类，对应的原子类的文档有说明
  • ant design 文档中有 与 tailwindcss 优先级冲突 相关方案，可以调整 antd 样式优先级以覆盖。

自定义基础样式

使用@layer base 指令向Tailwind的 base，在这里写基础样式，可以确保它们在其他样式之前加。

避免样式被删除

通过动态计算的类名字符，可能会在生产打包时被删除。

所以动态计算时，需要编写完整的类名：

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

文档说明： https://tailwindcss.com/docs/content-configuration#dynamic-class-names

使用笔记

长度单位概念

width、height、padding、margin、space、gap 等都使用了数值表示，它的含义为：

• 使用 rem 为单位，1rem 是 16px ，1 倍数字为 0.25rem，即 4px
• 所以可以使用 4px 去进行乘除计算，如 m-2 代表 8 px
• 支持小数，如 m-0.5，表示 2 px
• 支持负值，写法为 -mt-1 ，表示 margin-top: -4px
• 最新的编辑插件中会显示计算好的 px 值

颜色

tailwind 提供了许多精美的颜色： https://tailwindcss.com/docs/customizing-colors

比如希望使用 purple 中 500 这个颜色，写成：

• 文字颜色 text-purple-500
• 背景颜色 bg-purple-500
• 使用颜色的类都是这样使用，可通过 purple-500 触发智能提示看到所有使用颜色的类名

更多颜色用法：

• 设置透明度 text-purple-500 text-opacity-20 ，可简写为 text-purple-500/20
• 渐变背景色 bg-gradient-to-r from-fuchsia-600 to-pink-600

可通过 theme.extend.colors 配置文件继续添加自定义颜色。比如 shadcn/ui 初始化后就会创建：

border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
  DEFAULT: "hsl(var(--primary))",
  foreground: "hsl(var(--primary-foreground))",
},
// 省略其他配置

那么对于这些自定义的样式，也是这样使用：

• 文字颜色 text-border text-background text-primary text-primary-foreground
• 背景颜色 bg-border bg-background bg-primary bg-primary-foreground

这些颜色使用了 css 变量，可自由调配，类似地也可以其他设计系统结合起来，比如定义一个 tailwind 的颜色，使用 ant design 的 css 变量 --ant-color-primary

样式合并

通过 tailwind-merge 包，用于合并 tailwind 类名。

如作为一个组件，组件内部使用了 px-2 py-1 组件外部传入 className="p-3" ，通过 tailwind-merge 就可以合并这些样式，避免冲突。

因为 css 样式的优先级是根据编写 css 的定义顺序来的，而非类名顺序，架设 px-2 优先级比 px-1 高，那么从外部传入 px-1 ， 即 px-2 px-1 的类名下生效的永远是前面的，所以需要合并。

twMerge('border rounded px-2 py-1', props.className)