tailwindcss/plugin 是唯一合法入口，不包裹则插件不执行；必须用 plugin() 包裹导出函数，解构 addUtilities、theme 等参数在函数体内调用，theme() 外部调用报错，addUtilities 仅支持扁平样式对象，响应式与深色模式需手动展开，动态类名应使用 matchUtilities。
tailwindcss/plugin 是唯一合法入口，不包这一层，插件代码根本不会执行。
插件必须用 tailwindcss/plugin 包一层
直接 module.exports = { '.my-class': { color: 'red' } } 或裸函数 module.exports = ({ addUtilities }) => { ... } 都无效。Tailwind 只识别 tailwindcss/plugin 返回的函数上下文，否则 addUtilities、theme 全部不可用，且不报错，静默跳过。
- 正确结构：先
const plugin = require('tailwindcss/plugin')，再module.exports = plugin(function({ addUtilities, theme }) { ... }) -
theme()只能在该函数体内调用；外部提前取值会报theme is not a function - 本地插件文件（如
./plugins/text-gradient.js）也必须导出plugin(...)调用结果，不能是对象或字符串
addUtilities 适合原子工具类，addComponents 适合结构组件
混淆二者会导致样式注入位置错乱，响应式前缀或 .dark 变体可能失效。
-
addUtilities：用于可叠加、可组合的工具类，如.text-gradient、.sr-only-focusable；只接受扁平对象，不支持&:hover或嵌套 -
addComponents：用于固定结构的组件类，如.btn、.card；支持&:hover、&.active等嵌套写法 - 基础重置类（如表单默认边框）该用
addBase，塞进addUtilities容易被border-none这类工具类意外覆盖
带斜杠或冒号的类名必须用 e() 转义
像 .aspect-16/9 或 .md:hover 这类含特殊字符的类名，不转义会导致 CSS 解析失败或浏览器无法识别。
- 必须解构
e参数并显式调用：[`.aspect-${e('16/9')}`]、[`.md\:${e('hover')}`] - 漏掉
e()，生成的.aspect-16/9会被解析成除法运算，.md:hover会被当作伪类分隔符处理 - 响应式前缀中的冒号要双反斜杠转义（
\:），否则 PostCSS 解析失败
动态类名别硬编码，改用 matchUtilities
需要支持 text-fluid-sm、rotate-45 这类参数化类名时，addUtilities 写法冗长且难维护。
立即学习“前端免费学习笔记（深入）”；
-
matchUtilities接收正则匹配逻辑和值映射，例如/^rotate-(.+)$/→{ transform: `rotate(${value}deg)` } - 需手动配置
supportsVariants: true才能启用md:rotate-45、dark:rotate-45 -
matchUtilities不自动继承theme值，values必须明确传入，如theme('spacing')或自定义对象
theme() 的路径依赖——theme('colors.brand.500') 前没在 tailwind.config.js 的 theme.extend.colors 里声明 brand，返回的就是 undefined，样式字段为空，但编译不报错。 
