为什么我的 Tailwind css 类没生效

最近我在某个开发群里看到有人求助，说自己的 Tailwind css 类没有生效，于是我就看到了他的代码，他的 Vue 代码里使用了 ref 保存数字，动态组合成 Tailwind css 的类名 w-4到 w-9，最后仅 w-9没有生效。

很显然，这个问题我立马猜测这是没配置 safelist，所以打包后没有生成 w-9的类，最后排查也是如此。

本文稍微记录一下这个问题，然后谈谈如何使用 tailwind css的 safelist去支持动态类名。

前置知识 - Tailwind css

传送门 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS 上一个流行的实用性优先的 CSS 框架，允许开发者通过快速定义类名的方式，动态生成 CSS 代码，并且还提供了大量实用的基础类。

说得直白一点，Tailwind CSS 可以看作是一个工具箱，里面装满了各种各样已经预先定义好的 CSS 样式。每个样式都对应着一个特定的 CSS 属性，比如颜色、大小、间距等等。你在写 HTML 代码的时候，可以直接使用这些样式，而不用自己去写 CSS 代码。

也就是说，你不用花心思成为起名大师，也不会写重复或后续不会使用的 CSS 代码。Tailwind CSS 的样式还具有统一性，可以保证你的页面风格尽可能一致。

使用 tailwind css可以在项目构建的时候生成较小的 css文件。

当然，吐槽 tailwind css的人会说：

类名样式写在 HTML 中，类名会非常长
需要学习 Tailwind css 提供的各种类名

这个观点也不无道理，但是技术就是如此，如果你能接受它的缺点，那么就可以更好地享受它的优点。

Safelist

以下分享的知识源于笔者阅读官方文档后的感悟，感兴趣的可以自查

在 tailwind css v3.x 中 Safelist 即安全列表，用于指定构建的 css文件中始终包括对应的类。当你需要 tailwind css 生成 css 的时候生成一些项目代码中不涉及的类名（有可能是第三方库或组件的类名），或者是动态由 JavaScript 生成的类名，甚至是条件渲染容易缺失和遗漏的类名的时候非常有用。

举个例子，你的 CMS 系统将用户的某些样式设置为某个类名，这部分是你的项目代码中不存在的类名，而你依然想用 tailwind css 在生成的时候生成对应的样式。亦或是，你通过 JavaScript 去动态添加对应的类名，这部分类名可能不存在于项目代码扫描的内容里。

在 tailwind css v3.x 中，你可以在 tailwind.config.js这样的配置文件里设置白名单：

module.exports = { 
    content: [ 
    // your content files here 
    ], 
    safelist: [ 'w-9', 'columns-10', '...' ], 
    // other configurations 
};

在打包构建的时候，最终的 tailwind css 产物里会包含这些白名单的类名。

当然，如果你有大量同类型的类名，可以有更简单的方法配置，例如使用正则表达式和内容变体：

/** @type {import('tailwindcss').Config} */ module.exports = { 
    content: [
        './pages/**/*.{html,js}', 
        './components/**/*.{html,js}', 
    ],  
    safelist: [ 
        'text-2xl', 'text-3xl', 
        { pattern: /bg-(red|green|blue)-(100|200|300)/, }, 
        { 
            pattern: /bg-(red|green|blue)-(100|200|300)/, 
            variants: ['lg', 'hover', 'focus', 'lg:hover'], 
        },
    ],
     // ... 
}

最佳实践

当你使用 safelist 的时候，注意一下几点：

仅在 safelist 中添加真正需要的类名
如果你有大量类名需要添加，则考虑使用正则表达式和变体配置让代码更简洁，更易于维护
在上线之前，测试生成的样式表里是否真正包含你预期的样式，以免最后返工加班 🤣

最后谈谈 tailwind css v4.x

在 2025年1月22日, tailwind 官方推出 v4 版本更新，在新版本中 safelist 的介绍篇幅大减，当你在官网搜索这个关键字的时候，仅能找到以下内容：

在 css 中使用 @config 指令来载入旧版本的配置文件

@config "../../tailwind.config.js";

The corePlugins, safelist and separator options from the JavaScript-based config are not supported in v4.0.

如上所示，不支持 v4.0 中基于 js 配置文件的 safelist 选项了。

项目维护者对这个问题的回复如下：

Not solved yet but something we're going to look into soon. I secretly wish no one used this feature though 😄 还没搞定，但是我们会尽快看看这个功能，我希望不会有人使用这个功能 😁 2024 年 9 月 20 日

至今，官网任然没有提供新的更新来解答此问题（网上存在特殊的解法），走着瞧。

此外，🤣 有人对这个问题的解法是使用行内 style属性，成功收获十个开发者的支持 👎

总结

safelist 是 Tailwind CSS v3 中一个非常有用的功能，可以帮助你解决一些特殊情况下类名无法被检测到的问题。合理使用 safelist 可以保证你的网站样式完整，同时又能保持 CSS 文件的大小。

前置知识 - Tailwind css

Safelist

最佳实践

最后谈谈 tailwind css v4.x

总结

Friends