nuxi module add tailwindcss 是唯一推荐方式，因它自动注册模块、安装依赖、生成含正确 content 路径的 tailwind.config.ts；手动 npm install 会漏配 modules 或 content，导致 utility class 全丢失或 build 后样式消失。
nuxi module add tailwindcss 是唯一推荐的启用方式，手动安装几乎必然导致样式丢失或 HMR 失效。
为什么不能直接 npm install tailwindcss
因为 @nuxtjs/tailwindcss 模块不只是装包——它会自动：
• 在 nuxt.config.ts 的 modules 数组里插入 '@nuxtjs/tailwindcss'
• 补全 tailwindcss、postcss、autoprefixer 等 peer 依赖（Nuxt 3.10+ 要求 tailwindcss@^3.4）
• 生成带正确 content 字段的 tailwind.config.ts（含 app.vue、pages/**、components/** 等路径）
• 不覆盖已有配置，但也不会迁移旧版 tailwind.config.js
手动 npm install 后若漏加 modules 或 content，Tailwind 只编译 base 样式，所有 utility class 全部消失。
content 字段必须显式声明扫描路径
模块不会猜你哪些文件写了 class。默认生成的 content 是安全起点，但以下场景必须手动追加：
-
./composables/**/*.{ts}—— Composition API 里用useElement动态拼接 class 时，不加这行，class 会被 PurgeCSS 清掉 -
./plugins/**/*.{ts}—— 插件中通过app.provide注入的全局 class -
./layouts/**/*.vue—— 如果用了自定义 layout，且 class 写在 layout 文件里
常见错误：
• content: [] → 所有 utility class 全丢
• 写成 **/*.vue 却没包含 .ts → definePageMeta({ layout: 'foo' }) 里的 class 不生效
• dev 正常、build 后样式消失 → 99% 是 content 漏配
theme 扩展必须写在 tailwind.config.ts 里
所有自定义颜色、间距、字体等扩展，只能写在 tailwind.config.ts 的 theme.extend 中，而不是 nuxt.config.ts。Nuxt 3 已废弃 nuxt.config.ts 里的 tailwindcss 字段，模块只读 tailwind.config.ts。
示例（正确）：
export default {
content: [
'./app.vue',
'./pages/**/*.{vue,ts}',
'./components/**/*.{vue,ts}',
'./composables/**/*.{ts}'
],
theme: {
extend: {
colors: {
primary: '#3b82f6',
'primary-dark': '#2563eb'
}
}
}
}
错误写法：
• 把 theme 塞进 nuxt.config.ts 的 tailwindcss 对象里
• 在 tailwind.config.js 里写 module.exports = { ... }（Nuxt 3 推荐用 .ts 文件）
验证是否生效的最简方式
在任意页面组件里写：
<template><div class="bg-blue-500 text-white p-4 rounded-lg">Tailwind 生效！</div> </template>
如果看到蓝色背景和白色文字，说明已通；否则优先检查：
• 终端有没有报 Cannot find module '@nuxtjs/tailwindcss'
• nuxt.config.ts 的 modules 是否真包含 '@nuxtjs/tailwindcss'
• tailwind.config.ts 的 content 是否为空或路径写错
真正容易被忽略的是：PurgeCSS 不会报错，它只是静默删掉没匹配到的 class。你得靠 build 后 inspect CSS 文件，或者临时把 content 改成 ['./**/*.{vue,ts}'] 快速定位漏扫路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
