最近我在某个开发群里看到有人求助，说自己的 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.[1]
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,safelistandseparatoroptions 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 文件的大小。
好了，先这样
Bye
[1] Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.: https://tailwindcss.com/
