根本原因是postcss未正确加载tailwind插件，导致@tailwind指令被忽略；须手动初始化、显式注册插件（tailwindcss: {}）、且content路径必须精确匹配源文件扩展名（如.{js,ts,vue}）。
必须手动初始化配置、显式接入PostCSS链、且content路径不能写错——漏掉任一环，@tailwind 指令就完全不生效，生成的CSS里只有空规则。
为什么 @tailwind base 不输出任何样式？
根本原因是 Tailwind 没被 PostCSS 正确加载，而不是 CSS 引入顺序或文件位置问题。
- 只装了
tailwindcss包但没在postcss.config.js里注册插件，@tailwind指令会被直接忽略 - Webpack 的 CSS rule 中漏掉
postcss-loader，或顺序写成css-loader → postcss-loader → style-loader（正确顺序是style-loader → css-loader → postcss-loader） -
tailwind.config.js里没写content字段——v3 起这是必填项，否则连基础类都不扫描
content 路径写不对会怎样？
类名写在 HTML/JSX/Vue 文件里，但最终没对应样式，90% 是因为 content 没覆盖到实际源码路径。
- 常见错误写法：
["./src/**/*"]——**默认不匹配文件扩展名，Tailwind 扫不到.tsx或.vue - 正确写法示例：
["./src/**/*.{js,jsx,ts,tsx,vue}", "./public/index.html"]，有 HTML 就加，有 Vue 就明确列出来 - Taro 项目还要加
./src/app.{js,ts}和./src/pages/**/*.{js,ts}，否则页面级类名失效 - Webpack Encore 用户注意：它可能把 Vue 组件编译到临时目录，
content必须指向原始源码路径，不是build/下的产物
PostCSS 插件顺序为什么必须是 tailwindcss 在 autoprefixer 前？
@apply、@layer 这些 Tailwind 特有语法，得先由 tailwindcss 插件解析成标准 CSS，再交给 autoprefixer 加前缀；顺序颠倒会导致 @apply bg-blue-500 直接被丢弃，控制台无报错，但样式就是不出现。
- 在
postcss.config.js中写：plugins: { tailwindcss: {}, autoprefixer: {} }（对象写法保证执行顺序） - Webpack Encore 用户不能依赖
postcss.config.js，必须用Encore.enablePostCssLoader({ postcssOptions: { plugins: [...] } })显式传入数组 - Vue CLI 3+ 用户要写在
vue.config.js的css.loaderOptions.postcss.plugins里，不是postcss.config.js
开发时样式不热更新？
HMR 失效往往不是 Tailwind 本身的问题，而是 Webpack 没监听配置文件变更。
- 确保
webpack.config.js的watchOptions包含tailwind.config.js：watchOptions: { ignored: /node_modules/, paths: ['./tailwind.config.js'] } - Webpack 5 默认启用 file system cache，若缓存未命中
tailwind.config.js变更，需手动加cache: { type: 'filesystem', buildDependencies: { config: [__filename, './tailwind.config.js'] } } - Taro 项目额外注意：
@tarojs/plugin-html默认会删掉 Tailwind 注入的 CSS 变量块，必须在config/index.js里关掉removeCursorStyle，否则所有tw-变量都找不到
最常被跳过的其实是 content 字段和 postcss.config.js 的显式注册——这两个动作没有命令行自动补全，全靠手写，错一个字符就白配半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
