html必须用class驱动tailwind，禁用内联样式；响应式类须同属一个class属性；高频组合应通过@layer封装为自定义类；组件class需加前缀防冲突；深色模式需确保html有dark类。
HTML结构必须用class驱动，别写内联样式
Tailwind不是CSS框架，是“原子类工具集”，所有样式都靠class拼出来。你写style="color: red; margin-top: 1rem;"，等于绕开Tailwind白忙活——不仅没法用响应式断点（比如md:text-lg），还破坏了设计系统一致性。
常见错误：给按钮加style="background-color: #3b82f6;"，结果想在深色模式下换色时发现根本没走dark:bg-blue-700逻辑。
- 按钮背景统一用
bg-blue-500 hover:bg-blue-600 dark:bg-blue-700，别碰style - 间距用
mt-4 p-2 mx-auto这类，不是margin-top: 1rem; - 字体大小、圆角、阴影全部走
text-sm rounded-lg shadow-md，不手写CSS规则
响应式类名要写在同一个class属性里，别拆到多个标签
Tailwind的断点前缀（如md:、lg:）依赖解析器扫描单个class字符串。如果你把text-base和md:text-xl分开放在两个class里，或者用JS动态拼接class字符串但没加空格，构建工具可能漏掉响应式规则，尤其用Vite + content扫描时容易丢失。
典型翻车现场：<div class="text-base"> —— 浏览器只认最后一个<code>class，md:直接失效。
- 所有相关class写进一个
class=""属性，用空格隔开：class="text-base md:text-xl font-medium" - JS动态添加时用模板字符串：
class={`${baseClass} ${isWide ? 'md:w-1/2' : 'w-full'}` - 避免用
className.split(' ').map(...).join(' ')再塞回去——中间多空格或顺序错乱会导致PurgeCSS误删
用@layer抽离重复逻辑，但别在HTML里硬编码复杂条件
HTML里不该出现class="bg-gradient-to-r from-blue-400 to-purple-500 ... (一堆渐变+hover+dark混合)"这种超长class。它难读、难维护、易出错，而且Tailwind默认PurgeCSS会把你没显式写的组合类干掉（比如hover:from-red-500没在代码里出现过，就没了）。
真正该做的：把高频组合封装成@layer components里的自定义类，在HTML里干净调用。
- 在
tailwind.config.js的content路径里确保包含你的HTML文件（否则自定义类不生效） - 在CSS里写：
@layer components { .btn-primary { @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition; } } - HTML里就写
<button class="btn-primary">Submit</button>，清晰且可复用
组件级作用域要注意HTML语义与class命名冲突
很多人用card、modal这类通用名当class，结果和第三方库（比如Headless UI、DaisyUI）或自己后续写的.card { ... }全局CSS打架。Tailwind本身不提供组件封装，全靠你管好命名空间。
更隐蔽的问题：用group类做父容器交互时，如果嵌套太深或父元素没设relative，group-hover:xxx会失效——这不是Tailwind bug，是CSS层叠逻辑没对齐。
- 业务组件class加前缀，比如
myapp-card、myapp-modal-overlay，避免裸名污染 - 用
group时确认父元素有relative（否则absolute子元素定位错乱），且层级不超过3层 - 深色模式切换别只靠
dark:——检查上是否真有darkclass，有些框架需要手动加data-theme="dark"并配darkMode: 'class'
.btn-primary就永远不生效。
