最稳组合是@nuxtjs/tailwindcss+@nuxt/icon，二者开箱即用、天然协同；需显式配置content扫描路径、严格匹配iconify-json包命名、避免重复定义i-*类、用CSS变量控制暗色模式颜色、动态class须预列所有可能值。
直接用 @nuxtjs/tailwindcss + @nuxt/icon 是最稳的组合
不用自己配 PostCSS、不手动写 tailwind.config.js、不纠结 @tailwind base 放哪——@nuxtjs/tailwindcss 模块已默认启用 JIT 模式并自动扫描 components/、pages/、layouts/ 和 app.vue，@nuxt/icon 则原生支持 Iconify，开箱即用。二者在 Nuxt 3 的模块系统里天然协同，无需额外桥接。
content 扫描路径漏掉自定义目录会导致图标 class 消失
如果你在 composables/useIcon.ts 里返回了带 class="i-heroicons-lightning-bolt" 的对象，或在 plugins/icons.ts 里动态注入 icon class，这些路径必须显式加进 tailwind.config.js 的 content 字段，否则构建后 class 会被裁掉：
./composables/**/*.{ts,js}./plugins/**/*.{ts,js}-
./app.vue（别注释它，哪怕你没写 class，它可能被@nuxt/icon注入逻辑引用） - 避免写
./nuxt.config.{ts,js}—— Tailwind 静态扫描不支持，会报ERROR Importing directly from a nuxt.config file is not allowed
图标 class 命名要和 iconify-json 包严格匹配
@nuxt/icon 底层靠 @iconify/vue 渲染，所有 class 名必须符合 i-{prefix}-{name} 格式，且 {prefix} 必须对应已安装的 @iconify-json/xxx 包。比如用了 @iconify-json/icon-park-outline，就得写 i-icon-park-outline-home，而不是 i-home 或 i-outline-home。
- 检查是否已安装对应 JSON 包：
yarn add -D @iconify-json/icon-park-outline - 确认
nuxt.config.ts中启用了icon模块：modules: ['@nuxt/icon'] - 不要在
tailwind.config.js的theme.extend.colors里重复定义i-*类——Tailwind 不处理这类 class，它们由 Iconify 运行时解析
暗色模式下图标颜色失效？优先用 CSS 变量而非硬编码 color
如果图标在 dark 模式下还是黑色，不是 Tailwind 没生效，而是 @iconify/vue 默认把 color 属性转成内联 style，绕过了 CSS 变量链。正确做法是删掉 color 属性，改用 class 控制：
<icon name="i-heroicons-moon" class="text-themeText"></icon>
然后确保你的 tailwind.config.js 里有对应变量映射：
theme: {
extend: {
colors: {
themeText: 'var(--text)'
}
}
}
动态拼接 class（如 class="i-${prefix}-${name}"）仍会触发 Tailwind 漏扫，这种场景必须把所有可能的 prefix 和 name 显式列进 content，否则 build 后图标不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
