tailwind.config.js 必须手动创建或通过 npx tailwindcss init -p 生成,否则 class 不生效;content 路径必须准确匹配源文件位置,postcss 为硬依赖且需正确配置插件顺序。

tailwind.config.js 文件必须手动创建
不装 CLI 工具、不运行 npm init -y 或 npx tailwindcss init,tailwind.config.js 就不会凭空出现。很多新手卡在“为什么 class 不生效”,实际是压根没这个配置文件。
- 推荐用
npx tailwindcss init -p一键生成配置 +postcss.config.js(加-p才带 PostCSS 支持) - 若手动创建,内容至少得有
module.exports = { content: [], theme: {}, plugins: [] },否则content字段缺失会导致扫描不到模板路径,class 全被 PurgeCSS 删光 -
content数组里填的路径必须匹配你真实存放 HTML/JSX 文件的位置,比如./src/**/*.{html,js,jsx,ts,tsx},漏掉扩展名或路径层级错一级,热更新时 class 就突然消失
PostCSS 是硬依赖,不能跳过
Tailwind 本质是 PostCSS 插件,没 PostCSS 环境,@tailwind 指令根本不会被解析——哪怕你写了 @tailwind base,最终 CSS 文件里也只有一行注释。
- 必须安装
postcss和autoprefixer:npm install -D postcss autoprefixer -
postcss.config.js至少含module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };顺序不能反,tailwindcss必须在autoprefixer前 - Vite / Next.js 等现代框架虽内置 PostCSS,但默认不启用插件,仍需显式配
postcss.config.js,否则 Tailwind 不工作
build 后 CSS 为空或 class 缺失的典型原因
不是 Tailwind 坏了,大概率是 content 配置或构建流程断在某个环节。常见现象:开发时正常,build 后所有 utility class 全没了。
NetShop软件特点介绍: 1、使用ASP.Net(c#)2.0、多层结构开发 2、前台设计不采用任何.NET内置控件读取数据,完全标签化模板处理,加快读取速度3、安全的数据添加删除读取操作,利用存储过程模式彻底防制SQL注入式攻击4、前台架构DIV+CSS兼容IE6,IE7,FF等,有利于搜索引挚收录5、后台内置强大的功能,整合多家网店系统的功能,加以优化。6、支持三种类型的数据库:Acces
-
content路径写成相对路径如src/**/*.html(缺./),Node.js 会当模块名去 resolve,直接静默失败 - 用了 Vite,但没在
vite.config.js中配置css.postcss,导致 build 阶段跳过了 PostCSS 处理 - 在 CSS 文件里写了
@layer components { .btn { @apply py-2 px-4; } },但.btn在content扫描范围内没被引用过,PurgeCSS 会连带删掉整个@layer块 - 使用了
TAILWIND_MODE=watch但没配content,watch 模式下 Tailwind 只监听配置文件变更,不扫描源码,class 不会动态注入
CDN 引入只能用于原型,别上生产
https://cdn.tailwindcss.com 确实一行 script 就能跑,但它加载的是完整未裁剪版 CSS(~3MB),且不支持自定义 theme、plugins 或 @layer。
立即学习“前端免费学习笔记(深入)”;
- 它自动启用了 JIT 模式,但仅限于内联 style 标签或
class属性里的字符串——JSX 中变量拼接的 class(如className={`p-${size}`})会被忽略 - 无法配合
dark:、hover:等变体做条件编译,所有变体全量打包 - CDN 版本滞后,新出的
aria-或data-变体可能要等几天才同步,本地 CLI 安装才能即时用上
真正要上线的项目,绕不开 tailwindcss CLI + PostCSS 构建链。那些“不用配置”的爽感,后面都得用调试时间还。










