推荐用 @layer utilities 自定义语义化工具类，如 .card、.btn-primary，结合插件机制生成动态样式，保留原生类做响应式微调，兼顾可读性与灵活性。
直接用 Tailwind 的默认工具类确实容易记混，尤其当项目里频繁出现类似 mb-4、mt-6、py-3 这种组合时。与其硬背，不如把高频样式“固化”成语义化、易理解的自定义类名——Tailwind 完全支持这种方式，而且不增加运行时负担。
用 @layer utilities 扩展你自己的工具类
在 tailwind.config.js 同级的 CSS 文件（比如 src/index.css）中，可以利用 @layer utilities 定义专属类名，它们会和原生工具类一样参与 PurgeCSS 清理，且优先级可控。
- 例如把「卡片内边距+圆角+阴影」封装成
.card：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.card { @apply p-4 rounded-lg shadow-sm; }
.btn-primary { @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700; }
.text-emphasis { @apply font-medium text-gray-800; }
}
按业务场景分组命名，比纯原子类更直观
别只写 flex items-center gap-2，试试给它起个名字，比如 .inline-actions 或 .form-label-group。这类类名能立刻传达意图，也方便团队对齐。
- 适合封装：表单控件组合、列表项布局、响应式图文区块、状态徽标（如
.status-draft） - 避免过度抽象：像
.box、.wrap这类泛称反而降低可读性 - 命名保持小写+短横线，和 Tailwind 风格一致，比如
.section-header、.nav-breadcrumb
用 插件机制 抽离可复用的配置逻辑
如果某类样式需要动态生成（比如一整套主题色按钮、带 icon 的标签），可以用 Tailwind 插件自动注册多个类名，而不是手动写几十行 @apply。
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js中添加插件：
module.exports = {
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
'.sr-only': { position: 'absolute', width: '1px', height: '1px', padding: '0', margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: '0' },
'.focus-visible': { '&:focus': { outline: '2px solid #3b82f6', outlineOffset: '2px' } }
}
addUtilities(newUtilities)
})
]
}
保留原生工具类做微调，不追求 100% 封装
自定义类不是为了消灭所有 Tailwind 原生类，而是减少重复、提升表达效率。留出灵活空间很重要：
- 页面级微调仍用
md:pl-8这类响应式工具类 - 临时覆盖用
!important（配合!text-red-500）或内联style - 组件内部样式优先走
@apply，对外暴露语义类名，兼顾复用与可维护性
