npm安装+PostCSS构建是唯一生产就绪方式，支持JIT、暗色模式、响应式变体等全部功能；CDN仅限原型验证，不支持@apply、自定义主题及响应式断点。
直接用 npm 安装 + postcss 构建是最稳妥的方式，CDN 引入仅适合原型或简单页面，无法使用 @apply、自定义主题、响应式变体等核心能力。
通过 npm 安装并配置 PostCSS（推荐）
这是 Tailwind 官方唯一支持的生产就绪方式，能启用 JIT 编译、dark 模式、屏幕断点、hover/focus 等所有变体。
- 运行
npm install -D tailwindcss postcss autoprefixer，再执行npx tailwindcss init -p生成tailwind.config.js和postcss.config.js - 在
tailwind.config.js中配置扫描路径，例如content: ["./src/**/*.{html,js,ts,jsx,tsx}"]，确保类名不被 PurgeCSS 误删 - 在主 CSS 文件（如
src/index.css）中写入：@tailwind base; @tailwind components; @tailwind utilities;
- 用
postcss处理该 CSS 文件（如配合 Vite、Webpack 或单独用postcss-cli），输出为最终样式
用 CDN 快速验证但别用于正式项目
CDN 方式加载的是预编译的全量 CSS（约 3.5MB），无 tree-shaking，且不支持任何定制化功能。
- 在 HTML
中插入：<script src="https://cdn.tailwindcss.com"></script> - 它会自动启用基础 JIT，但
tailwind.config.js不生效，@layer、@apply、自定义theme.spacing等全部不可用 - 遇到
text-lg生效但md:text-xl不生效？那是 CDN 默认禁用了响应式变体——你没法开
常见构建失败原因：PostCSS 插件顺序或 content 路径错
Tailwind 的类名必须被 content 配置明确覆盖到，否则 PurgeCSS 会清空几乎所有 utility 类，只剩 base 样式。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：
bg-blue-500、flex等类完全无效，浏览器里查不到对应 CSS 规则 - 检查
tailwind.config.js中content数组是否匹配你实际写类名的文件路径（注意大小写和扩展名） - PostCSS 插件顺序错误也会导致
@tailwind指令不解析：确保tailwindcss()在autoprefixer之前 - Vite 用户若用
import './index.css'但没启用postcss插件，CSS 就只是普通导入，@tailwind不会被处理
真正麻烦的不是引入这一步，而是后续改配置时没意识到 content 是硬性依赖、CDN 和本地构建的能力边界完全不同——很多问题其实卡在「以为引入了就能用全部功能」这个误解上。
