如何使用Tailwind CSS插件编写函数来添加自定义CSS实用工具类？

本文共计834个文字，预计阅读时间需要4分钟。

要使用 Tailwind CSS 插件，首先需要安装它。可以使用以下命令：

怎么写一个合法的插件函数

插件必须是导出一个函数的模块，且该函数接收一个上下文对象（含 addUtilities、theme 等），不能直接返回样式对象或调用 addUtilities 顶层。

• 错误写法：module.exports = { '.text-gradient': { ... } } —— Tailwind 不识别纯对象
• 正确结构：用 const plugin = require('tailwindcss/plugin') 包一层，再 module.exports = plugin(...)
• 函数体里才能安全调用 theme('colors.blue.500')；在 module.exports 外层访问会报 theme is not a function
• 如果要用转义类名（比如带斜杠的 .aspect-16/9），得传 e 参数并显式调用 e('16/9')

addUtilities 支持哪些写法

addUtilities 接收一个样式对象或数组，但格式稍有差异：键是类名字符串，值是 CSS 声明对象；媒体查询和深色模式需作为独立键写入，不能嵌套。