Tailwind 与原子化 CSS
Tailwind CSS 走另一条路：不写语义类名，直接用工具类组合（class="p-4 rounded-lg text-center"）。看起来像“行内样式”，但它所有值来自统一设计系统（色板、间距、字号都是预设档位），所以页面间天然一致；再用按需编译，最终产物只有你真正用到的类。
原子化 CSS 的最大好处是“不用起名字、不用切 CSS 文件、改样式不用跨文件跳转”；代价是类名长、需要熟悉档位。适合中后台、快速迭代项目。
- 工具类即样式：p-4 = padding 1rem，所有值来自预设设计系统
- JIT 按需编译：产物只含用到的类，体积通常只有几 KB
- 响应式前缀：md:text-lg 表示 ≥768px 时生效；dark: 前缀跟暗色模式
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind 示例</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50 p-8"> <!-- 工具类组合：卡片，响应式字号，悬停阴影 --> <div class="max-w-sm mx-auto bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-shadow"> <h2 class="text-xl md:text-2xl font-bold text-gray-800"> Tailwind 卡片</h2> <p class="text-gray-600 mt-2">所有样式由工具类完成，没有单独的 CSS 文件。</p> <button class="mt-4 px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 active:scale-95 transition"> 按钮 </button> </div> </body> </html>
本节要点Tailwind 用工具类直接写样式，值来自设计系统；按需编译让产物极小，代价是要熟悉档位。
