Tailwind需正确引入CSS文件，CDN方式最简但变体需手动启用；原子类顺序无关，但组合需满足逻辑约束；任意值语法便捷但生产慎用；禁用@apply封装，应通过组件拆分管理复杂结构。
直接在HTML标签里写class就行，但得先引入Tailwind
Tailwind不是“用法”复杂，而是依赖链容易断。没正确加载CSS文件时，text-blue-500、flex-col 这些类名全无效，浏览器里查元素也看不到样式——这不是写错了，是根本没加载成功。
最稳妥的引入方式是通过 CDN（适合快速验证或小项目）：
<script src="https://cdn.tailwindcss.com"></script>注意：CDN 版默认只启用常用类，
hover:underline、md:text-lg 这类变体默认关闭，需要手动启用：
- 加
tailwind.config.js并配置theme.extend.screens或variants（CDN 不支持） - 或改用构建方式（推荐）：npm 安装 + PostCSS +
@tailwind指令注入
class顺序不影响样式，但组合逻辑必须对
Tailwind 是原子类，每个 class 只管一个声明，比如 font-bold → font-weight: 700，text-center → text-align: center。它们之间不嵌套、不继承，所以 class 写在前面还是后面，完全不影响最终 CSS 规则。
但组合时有隐含约束：
立即学习“前端免费学习笔记（深入）”；
-
md:flex必须和flex同时存在才生效（响应式类不会自动“补基础行为”） -
bg-gradient-to-r要配合from-blue-400+to-purple-500才能出渐变，单独写没用 -
transition-all和duration-300得一起上，否则 hover 时没动画
常见错误：<div class="md:hidden lg:block"> —— 这在屏幕宽度 ≥1024px 时生效，但中间断层（992–1023px）会同时满足 md:hidden（生效）和 lg:block（不生效），结果是隐藏。别靠“猜断点”，查 tailwind.config.js 里的 screens 值。
自定义值要配 config，不能硬写 text-[#1e3a8a]
Tailwind 默认只生成预设色板里的类，比如 text-blue-800 对应 #1e3a8a。想用任意颜色、字号或间距，有两个路子：
- 启用 JIT 模式（v3.0+ 默认）后，支持“任意值”语法：
text-[#1e3a8a]、px-[1.875rem]、shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]—— 但仅限于 JIT 编译时能静态分析到的字符串，动态拼接（如class="text-[${color}]"）无效 - 更稳的方式是改
tailwind.config.js：module.exports = {<br> theme: {<br> extend: {<br> colors: { brand: '#1e3a8a' },<br> spacing: { '18': '4.5rem' }<br> }<br> }<br>}然后就能用text-brand、mt-18
任意值语法看着方便，但打包体积不可控，CI 环境可能因正则匹配失败而漏生成类——生产环境慎用。
不要用 @apply 在 CSS 里封装原子类
有人想把 class="flex items-center justify-between p-4 bg-gray-50 rounded-lg" 封成一个 CSS 类，于是写：
.card { @apply flex items-center justify-between p-4 bg-gray-50 rounded-lg; }这看似省事，实际埋了三个坑：
- @apply 无法展开带变体的类（
hover:bg-gray-100、md:p-6会报错） - 生成的 CSS 会丢失 Tailwind 的 PurgeCSS 清理能力，未使用的原子类仍被打包进去
- 调试时失去原子类语义，查 DOM 看不到原始意图，只看到一个叫
card的黑盒
真要复用，用 React/Vue 组件封装 HTML 结构，或者用 @layer components 配合 @apply（且仅用于无响应/无状态的基础样式）。HTML 里就老老实实写原子类。
复杂交互或深层嵌套布局时，原子类会变长、易错——这时候不是 Tailwind 的问题，是结构该拆组件了。别指望靠 class 堆砌替代设计分层。
