Tailwind CSS 通过预定义实用类组合界面，需正确配置 content 路径、三行 @tailwind 指令，并理解条件性 class、响应式/暗色模式嵌套规则及渐进式维护策略。
Tailwind CSS 不是“用 CSS 写样式”，而是用预定义的实用类（utility classes）组合出界面——它不提供语义化组件，也不隐藏底层 CSS，你得直接面对 margin、flex、bg-opacity 这些概念。
怎么让 Tailwind 正确加载并支持自定义配置
很多人跑完 npm install -D tailwindcss 就以为完了，结果 class 不生效，或者 @apply 报错。核心问题是：Tailwind 默认只扫描 .html 和 .js 文件里的 class，如果你用的是 .tsx、.vue 或 .svelte，必须手动更新 tailwind.config.js 中的 content 字段：
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx,vue,svelte}",
],
// ...
}
另外，确保你的 CSS 入口文件里写了三行必需的指令：
@tailwind base; @tailwind components; @tailwind utilities;
漏掉 @tailwind base 会导致 preflight 重置失效；漏掉 utilities 就等于没引入任何实用类。
立即学习“前端免费学习笔记（深入）”；
为什么有些 class 写了但没效果，比如 bg-opacity-30 或 hover:scale-105
Tailwind 的很多 class 是“条件性启用”的：它们依赖于对应的基础属性是否开启。例如：
-
bg-opacity需要backgroundColor在theme.extend.opacity或默认调色板中存在对应值（默认有0–100） -
hover:scale-105要求transform和scale都在plugins中启用（默认已开），且元素本身要有transform触发条件（比如不是display: inline） -
disabled:opacity-50只对原生含disabled属性的标签（、）自动生效；自定义组件需手动加disabled属性或用data-disabled+variants
查不到 class？先运行 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch 看构建日志有没有 warn 提示“class not found”，再确认拼写和空格（md:text-lg 不能写成 md: text-lg）。
如何避免 class 堆砌失控，又不急着写 @apply 或组件
一个按钮写成 class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" 是典型初学者陷阱。这不是错，但难维护。建议分三步收敛：
