Tailwind CSS v3 插件 API 不支持原生 CSS 嵌套语法，addUtilities 仅接受扁平对象，需显式声明 .btn:hover 等完整类名并传入变体数组才能生效。
Tailwind CSS v3 本身不支持原生 CSS 嵌套语法（如 :hover、&）直接写在插件的 addUtilities 或 addComponents 对象里 —— 这类嵌套会被当作普通字符串忽略，不会生成对应变体或嵌套规则。
为什么不能直接用 &:hover 写在 addUtilities 里
Tailwind 的 addUtilities 接收的是扁平的 CSS 声明对象，例如 { '.btn': { color: 'red' } }。它不解析 CSS 嵌套语法，也不运行 PostCSS 嵌套插件（如 postcss-nested）的转换逻辑。即使你在项目中已配好 postcss-nested，它只作用于 @layer 中的 CSS 文件，**不介入插件 API 的 JS 对象结构**。
常见错误现象：
- 写了
{ '.btn': { '&:hover': { color: 'blue' } } }→ 构建后无.btn:hover规则 - 写了
{ '.btn:hover': { color: 'blue' } }→ 能生效，但无法自动继承响应式前缀（如md:hover:bg-blue-500不会生成） - 误以为
theme('colors')支持$blue-500这种 Sass 风格变量引用 → 实际必须用theme('colors.blue.500')
正确注册带伪类/响应式的工具类：用 addUtilities + 显式键名
要让 .btn:hover、.btn:disabled 或 md:btn 等变体生效，必须手动写出完整类名，并传入变体数组：
立即学习“前端免费学习笔记（深入）”；
addUtilities({
'.btn': {
padding: '0.5rem 1rem',
borderRadius: '0.25rem',
},
'.btn:hover': {
backgroundColor: theme('colors.blue.600'),
},
'.btn:disabled': {
opacity: 0.5,
cursor: 'not-allowed',
},
}, ['responsive', 'hover', 'focus', 'active', 'disabled'])
关键点：
- 每个伪类状态（
:hover、:focus）必须作为独立键显式声明 - 第二个参数
['responsive', 'hover', ...]是变体白名单，告诉 Tailwind “这些变体可作用于上述所有键” - 响应式前缀（如
md:）会自动作用于所有键，包括.btn:hover→ 最终生成md:hover:btn类（注意顺序） - 不要试图用
&或@media块包裹 —— 插件函数不是 CSS 编译器
需要深度嵌套？改用 addComponents + @apply（仅限 CSS 文件）
如果真要写类似 .card { &__header { color: red; } &__body:hover { ... } } 这种嵌套结构，唯一可行路径是：
- 在插件中不处理嵌套逻辑
- 把样式写进一个独立的
.css文件（如src/styles/components/card.css） - 用
addComponents注册一个占位类（如'.card': {}），仅作标记 - 在该 CSS 文件中用标准 PostCSS 嵌套语法 +
@apply复用 Tailwind 工具类
示例 card.css：
@layer components {
.card {
@apply rounded-lg border p-4;
&__header {
@apply font-bold text-gray-800;
}
&__body:hover {
@apply bg-gray-50;
}
}
}
然后确保这个文件被 content 配置扫描到，或通过 @import 显式引入 main.css。
容易被忽略的兼容性细节
微信小程序、uniapp 等非浏览器环境对伪类支持有限：
-
:hover在小程序里基本无效（无鼠标悬停概念），:active也仅部分平台模拟 -
dark:变体依赖class切换或媒体查询，小程序需手动注入darkclass 并监听系统主题变化 - 如果你在
weapp-tailwindcss环境下开发，addUtilities注册的伪类键名（如.btn:hover）会被转义成小程序支持的内联样式，但行为仍受限于平台能力
换句话说：插件能帮你“写出来”，但能不能“跑起来”，得看目标平台吃不吃这套语法。
