插件未生效主因是plugins数组漏require()或未用tailwindcss/plugin包裹；自定义插件须用plugin()封装并注册到plugins数组，theme()和addutilities仅在回调内可用，类名含特殊字符需e()转义，颜色等需先在theme.extend中声明。
插件写完却没生成任何类？大概率是 plugins 数组漏了 require()，或者自定义插件没用 tailwindcss/plugin 包裹——Tailwind 会静默跳过，不报错也不输出 CSS。
插件必须注册进 tailwind.config.js 的 plugins 数组
装了包 ≠ 插件生效。Tailwind 不扫描 node_modules 或本地目录，只执行 plugins 数组里显式列出的函数。
-
require('@tailwindcss/forms')必须写进数组，不能只装不引 - 本地插件路径要带
.js后缀：require('./plugins/text-gradient.js')，漏掉就构建崩溃 - 多个插件必须拆成独立数组项，不能合并：
require('@tailwindcss/forms,@tailwindcss/typography')❌ - 确保
tailwind.config.js是 CommonJS 模块（后缀.cjs或不用import）
自定义插件必须用 tailwindcss/plugin 包裹
直接 module.exports = { '.my-class': { ... } } 或裸函数，Tailwind 完全无视。只有 plugin() 返回的函数才能访问 addUtilities、theme 等上下文。
- 正确结构：
const plugin = require('tailwindcss/plugin'); module.exports = plugin(({ addUtilities, theme }) => { ... }) -
theme()只能在该函数体内调用，外部提前取值会报theme is not a function - 别在
module.exports外层调用addUtilities，它根本不存在
用 addUtilities 注入工具类，注意类名转义和响应式支持
addUtilities 只接受扁平对象，不支持嵌套规则或伪类。斜杠、冒号等特殊字符必须用 e() 转义，否则生成非法 CSS 选择器。
- 含斜杠的类名（如
aspect-16/9）必须写成[`.aspect-${e('16/9')}`] - 带冒号的响应式前缀（如
md:hover）要写成[`.md\:${e('hover')}`]（注意双反斜杠） - 响应式需手动展开：
'@media (min-width: 768px)': { '.md\:text-lg': { fontSize: '1.125rem' } } - 深色模式变体要显式写：
'.dark .dark\:bg-brand': { backgroundColor: theme('colors.brand.500') }
动态类名优先用 matchUtilities，别硬编码
像 text-fluid-sm、rotate-45 这类带参数的类，用 addUtilities 写几十个太累，且无法自动继承变体支持。
-
matchUtilities接收正则和映射函数，例如/^rotate-(.+)$/→transform: rotate(${value}deg) - 启用响应式/深色模式需设
supportsVariants: true - 类名中含斜杠时，仍需在回调里调用
e(value)，比如aspect-${e(value)} -
theme()调用前，对应路径必须已在theme.extend中声明，否则返回undefined
最常被忽略的是 e() 转义和 theme.extend 配置的先后关系：类名不转义，浏览器解析失败；颜色没在 extend 里定义，theme('colors.brand.500') 就是空字符串，生成的 CSS 里连值都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
