唯一可靠方式是用 tailwindcss/plugin 包裹 addUtilities；手写 CSS 类不生效，因 Tailwind 仅扫描 content 配置路径中的类名字符串，且不支持变体、响应式等特性。
直接用 addUtilities + tailwindcss/plugin 是唯一可靠方式，其他写法大概率不生效或破坏构建流程。
为什么不能直接在 CSS 文件里写 .my-class？
Tailwind 的按需生成机制只扫描 content 配置中列出的文件路径里出现的类名字符串。你在 CSS 里手写 .my-class，但 HTML 或 JSX 里没写这个类名，它就不会进最终 CSS；即使写了，也绕不过响应式、深色模式、hover 变体等能力支持。
- 手写 CSS 类 = 完全脱离 Tailwind 的构建体系
- 裸导出对象（如
module.exports = { '.my-class': { color: 'red' } }）→ Tailwind 直接忽略 ❌ - 裸函数调用
addUtilities→ 构建报错，theme()不可用 ❌
正确写法：plugin 包裹 + addUtilities
必须用 tailwindcss/plugin 包裹函数，再在内部调用 addUtilities。这是 Tailwind 唯一识别的插件格式。
- ✅ 正确结构：
const plugin = require('tailwindcss/plugin')<br>module.exports = plugin(({ addUtilities, theme }) => {<br> addUtilities({<br> '.sr-only': { position: 'absolute', clip: 'rect(0 0 0 0)' },<br> '.text-shadow-sm': { textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }<br> })<br>}) -
addUtilities只接受扁平对象，不支持&:hover或嵌套 —— 这类需求该用addComponents - 类名必须带点号前缀，比如
'.sr-only'，不能漏掉.
响应式和深色模式怎么加？
它们不会自动继承，必须手动展开写死媒体查询或选择器组合。
立即学习“前端免费学习笔记（深入）”；
- 响应式要写完整键名：
'@media (min-width: 768px)'，注意冒号前加双反斜杠转义：'.md\:sr-only' - 深色模式要显式拼接：
'.dark .dark\:bg-brand'，并确保theme('colors.brand.500')已在theme.extend.colors中定义 - 动态类（如
aspect-16/9）别硬编码，改用matchUtilities，且必须设supportsVariants: true才能支持md:aspect-16/9
最容易被忽略的是：content 数组必须覆盖所有使用这些自定义类的文件路径，否则哪怕插件写得完全正确，类名也不会生成 —— Tailwind 根本看不到你用了它。
