Tailwind CSS 基础概念、配置、常见问题和使用笔记

介绍

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

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

优势

它有许多优势：

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

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

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

环境

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
设置无法控制子类样式时使用 *: 修饰符

自定义的状态修饰符：

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

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

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

长度单位概念

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 值

响应式

默认的媒体查询断点 sm md lg xl 2xl ，是使用 min-width 控制的，移动优先，开发时先考虑小屏幕样式，再处理大屏幕样式。

sm 640px @media (min-width: 640px)
md 768px @media (min-width: 768px)
lg 1024px @media (min-width: 1024px)
xl 1280px @media (min-width: 1280px)
2xl 1536px @media (min-width: 1536px)

使用方法：

在样式中通过 lg:w-16 这种形式写特点断点下的样式
在 js 中可通过 const isLg = useMedia("(min-width: 1024px)", false) 来判断

颜色

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)

渲染未知的富文本内容

可使用 @tailwindcss/typography 插件，通过 prose 类快速获得专业、美观的排版样式。

https://github.com/tailwindlabs/tailwindcss-typography

支持多种尺寸，主要是影响字号，如判断大屏幕使用更大字号 prose lg:prose-xl；默认有最大宽度，可使用 max-w-none 覆盖；支持配置支持黑夜模式 dark:prose-invert。

<div className="prose lg:prose-xl dark:prose-invert max-w-none" ref={ref}>
  <div dangerouslySetInnerHTML={{ __html: content }}></div>
</div>

常见问题

避免样式冲突

类名冲突：可以在 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

生态

组件库：

shadcn/ui
Daisy UI
Next UI
…

Tailwind 组件区块与模板，这些资源也可以为设计页面提供灵感，可配合 html-to-jsx 工具使用：

tailspark.co
tailblocks.cc
tailwind-kit.com
flowbite.com
easyfrontend.com
merakiui.com
LoFi UI - CodePen
…

可以在 aniftyco/awesome-tailwindcss 仓库或 tailwindawesome.com 中找到更多的资源，或者从搜索引擎搜索。

介绍

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

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

优势

它有许多优势：

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

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

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

环境

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
设置无法控制子类样式时使用 *: 修饰符

自定义的状态修饰符：

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

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

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

长度单位概念

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 值

响应式

默认的媒体查询断点 sm md lg xl 2xl ，是使用 min-width 控制的，移动优先，开发时先考虑小屏幕样式，再处理大屏幕样式。

sm 640px @media (min-width: 640px)
md 768px @media (min-width: 768px)
lg 1024px @media (min-width: 1024px)
xl 1280px @media (min-width: 1280px)
2xl 1536px @media (min-width: 1536px)

使用方法：

在样式中通过 lg:w-16 这种形式写特点断点下的样式
在 js 中可通过 const isLg = useMedia("(min-width: 1024px)", false) 来判断

颜色

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 就可以合并这些样式，避免冲突。

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

渲染未知的富文本内容

可使用 @tailwindcss/typography 插件，通过 prose 类快速获得专业、美观的排版样式。

https://github.com/tailwindlabs/tailwindcss-typography

<div className="prose lg:prose-xl dark:prose-invert max-w-none" ref={ref}>
  <div dangerouslySetInnerHTML={{ __html: content }}></div>
</div>

常见问题

避免样式冲突

类名冲突：可以在 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

生态

组件库：

shadcn/ui
Daisy UI
Next UI
…

Tailwind 组件区块与模板，这些资源也可以为设计页面提供灵感，可配合 html-to-jsx 工具使用：

tailspark.co
tailblocks.cc
tailwind-kit.com
flowbite.com
easyfrontend.com
merakiui.com
LoFi UI - CodePen
…

可以在 aniftyco/awesome-tailwindcss 仓库或 tailwindawesome.com 中找到更多的资源，或者从搜索引擎搜索。

Tailwind CSS 基础概念、配置、常见问题和使用笔记

介绍

优势

环境

playground

IDE

配置

为项目配置启用 Tailwind

类排序格式化

使用笔记

常用特性

长度单位概念

响应式

颜色

样式合并

渲染未知的富文本内容

常见问题

避免样式冲突

自定义基础样式

避免样式被删除

生态

一些好用的 npm 前端开源库

Tailwind CSS 基础概念、配置、常见问题和使用笔记

介绍

优势

环境

playground

IDE

配置

为项目配置启用 Tailwind

类排序格式化

使用笔记

常用特性

长度单位概念

响应式

颜色

样式合并

渲染未知的富文本内容

常见问题

避免样式冲突

自定义基础样式

避免样式被删除

生态

一些好用的 npm 前端开源库