Tailwind CSS（有新的更新）

平台内置了 Tailwind CSS (opens new window) , 可通过各种 程序类 快速构建自定义用户界面，再也不用写那些 "裹脚布" 似的 css 啦

# `Tailwind CSS` 支持哪些浏览器版本

具体看这里 browser-support (opens new window)

# `Tailwind CSS` 的 `vscode` 插件

在 vscode 插件商店搜 bradlc.vscode-tailwindcss 安装后，鼠标覆盖到对应的类名，即可带来智能提示，如下图

# `Tailwind CSS` 文档

官方文档 (opens new window)

# `Tailwind CSS` 使用技巧

# 1. 自定义属性值

拿最常用的 width 属性来举例，tailwindcss 内置了这些 width#class-reference (opens new window) 类名，有时候用户想写任意宽度值怎么做呢，比如给 div 一个 666px 的宽度，只需要按照下面的写法。当然不仅仅是宽度可以自定义，所有属性都支持这种模式，你只需要在自定义的时候用 [ ]包起来即可。

<div class="w-[666px]" />

# 2. `!important` 权重

# 2-1. 单个实用程序类加 `!important`

比如给 p 标签一个 black !important 的高权重字体颜色，只需要按照下面的写法。也就是某个属性，你需要加权重，那么就在其后面加上 ! 感叹号即可。

<p class="text-black!">
  This will be medium even though bold comes later in the CSS.
</p>

1
2
3

# 2-2. `!` 总是在实用程序名称的末尾

<div class="mt-6!"></div>

<div class="hover:text-white!"></div>

<div class="dark:hover:text-white!"></div>

1
2
3
4
5

# 3. 悬停、焦点和其他状态

具体看这里 hover-focus-and-other-states (opens new window)

# 4. 响应式设计

具体看这里 responsive-design (opens new window)

# 5. 暗黑模式

比如在 非暗黑 模式时给 div 标签一个 白 色背景（ bg-white ），在 暗黑 模式时给 div 标签一个 黑 色背景（ bg-black ），只需要在程序类前面加上 dark: 即可。

<div class="bg-white dark:bg-black"></div>

# 5. 重用样式

当项目越来越大时，如果不规范使用 tailwindcss ，很容易造成项目难以维护。这里平台有两点提议，如下：

① 将重复的模块，抽离成组件
② 使用 @utility 提取类，参考 src/style/tailwind.css (opens new window)，代码解释如下：

@utility flex-c {
  @apply flex justify-center items-center;
}

1
2
3

上面的代码意思是，将 flex 、 justify-center 、 items-center 都提取到自定义的 flex-c 这个程序类里，然后我们可以向下面代码一样使用：

<div class="flex-c"></div>

# `CSSNANO`

cssnano 中文文档 (opens new window)
平台集成了 cssnano 集成代码位置 (opens new window) ，它是一款基于 postcss 构建的 css 优化开源工具。cssnano 能为你的 CSS 文件做多方面（多余的空白被删除、标识符被压缩、清理无用的 CSS 代码）的的优化，以确保最终生成的 CSS 文件对生产环境来说体积是最小的。

# `PostCSS`

postcss 是一款通过 js 插件来转换 css 的开源工具，通过这些插件可以支持变量和混合，可以通过追加浏览器前缀生成兼容性的样式，也可以通过 polyfill (opens new window) 把新的样式特性处理成通用的样式，可以使用 css 模块以及样式的规则校验，关于 postcss 更多的内容点这里 (opens new window) 去了解。

CSS 框架选型经历

平台其实在 CSS 框架 选型中一共经历了三个阶段。

第一阶段：windicss (opens new window) 起初选这个的原因是当时 tailwindcss 还没有升级到 v3.0 版本
第二阶段：unocss (opens new window) 选择这个的原因是 windicss 好久没有维护了，并且 windicss 还有本地开发内存溢出等问题
第三阶段：tailwindcss (opens new window) 选择这个的原因是虽然 unocss 很强大，功能也多，但是可能就是因为功能太多，带来的问题也就越多吧。其实，平台只是需要一个稳定的纯 CSS 框架。tailwindcss 在 vite 中使用不需要安装什么插件，只需要安装 tailwindcss 即可，并且 tailwindcss 未处理的 issues (opens new window) 极少，维护很及时，经过再三考虑和一些实践，最终选择了稳定的 tailwindcss

上次更新: 2025/05/09, 02:23:01

← 国际化 RBAC权限→

Tailwind CSS（有新的更新）

# Tailwind CSS 支持哪些浏览器版本

# Tailwind CSS 的 vscode 插件

# Tailwind CSS 文档

# Tailwind CSS 使用技巧