去年，我在检查一个客户的代码仓库时，发现一个按钮组件的 className 里硬塞了 27 个 Tailwind class。
那场景就像是有人把一袋拼字游戏的字母随意摇晃，然后全部倒进了代码编辑器。更令人头疼的是？应用里的每一个按钮，都有一套自己“略微不同”的混乱版本。不同深浅的蓝色、随意的内边距、像掷飞镖决定出来的圆角边框。
就在那一刻我意识到：许多开发者并非在使用 Tailwind CSS，而是在滥用它。这也不能完全归咎于他们，Tailwind 让编写内联工具类变得过于简单，以至于人们容易忘记，我们本应是在构建一个可维护的系统。
1. 停止编写“工具类小说”
是的，Tailwind 的核心是工具优先，但这并不意味着你需要在每个组件里创作一部 14 个 class 的史诗巨著。
如果你的 div 长这样：
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out flex items-center justify-center gap-2 w-full max-w-sm mx-auto border border-blue-700" />
……那么，你可能刚刚让一位代码审查者流下了眼泪。
专业做法是：将可复用的模式抽取出来。你可以通过 CSS 中的 @apply 指令，或者在 JavaScript 里使用类似 clsx 或 classnames 的库来实现。
/* button.css */
.btn-primary {
@apply bg-blue-500 text-white p-4 rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out;
}
现在，你的 JSX 就变得清晰多了：
<button className="btn-primary">Click Me</button>
这样做不仅代码更整洁，也具备了可复用性，未来的你一定会感谢现在这个明智的决定。
2. 设计令牌不是摆设
如果你的间距、字体大小、颜色等样式全都零散地写在各种工具类里，那么你完全没有发挥出 Tailwind 配置文件 (tailwind.config.js) 的真正威力。
你可以在配置文件中定义品牌色、间距体系和排版规范。为什么要这么做？因为当品牌团队决定将“主色调”蓝色调暗 3% 时，你就不必在 93 个组件 里逐个查找并替换 bg-blue-500 了。
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
primary: '#1e40af',
secondary: '#f59e0b',
}
}
}
}
}
定义好后，你就可以这样使用：
<div className="bg-brand-primary text-brand-secondary" />
3. 使用变体，而非复制粘贴
Tailwind 提供了 @variants 功能，同时也有像 tailwind-variants、cva 这样的库，这都不是没有原因的。
如果你在每个错误提示组件里都手动复制 bg-red-500，那么你的做法可能存在问题。你需要的是组件样式的单一事实来源，而不是一堆看似遵循了 DRY 原则，实则混乱如意大利面条的代码。
4. 响应式与状态类不是随手撒的调料
初学者编写的 Tailwind 代码，经常像是在随意抛洒 md:、lg:、hover: 这些前缀。这导致代码缺乏规划和一致性。
专业开发者会以设计系统的思维来编写：考虑在每个断点下，哪些属性会发生变化？哪些交互状态是真正重要的？你的响应式工具类应该是在有逻辑地“讲述故事”，而不是制造突兀的剧情反转。
❌ 不够理想的示例：
<p className="text-sm md:text-lg lg:text-base hover:underline hover:opacity-70 focus:text-xl">
Hello
</p>
✅ 更佳的示例：
<p className="text-sm md:text-lg hover:underline focus:opacity-70">
Hello
</p>
5. 不要与 Tailwind 对抗 —— 去配置它
如果你发现自己正在为 Tailwind 本来就能轻松实现的功能编写大量自定义 CSS，那么很可能是因为你还配置得不够。
想要特定的网格布局？把它加入配置文件。需要自定义动画？Tailwind 支持配置 keyframes。不想每次都输入 rounded-xl？把它设置为默认值。
请记住，Tailwind 是一个框架，而不仅仅是一桶工具类。把它当作一个强大的框架来使用和配置。
最后
Tailwind CSS 非常强大，但前提是你需要有意识地使用它。如果你的代码库看起来像一锅“工具类乱炖”，那么它既不“干净”，也不“现代”——只是一个穿着时尚外衣的维护噩梦。
整理你的 class，善用配置文件，抽离可复用模式，用系统化的思维去编写代码。因为：
- 在初学者手中，Tailwind 或许是快速交付“能用但粗糙”代码的捷径。
- 在专业开发者手中，Tailwind 才能成为真正的生产力超能力 🚀。
希望这些实践能帮助你更好地驾驭 Tailwind。如果你也在探索前端工程化的最佳实践，欢迎到云栈社区 与其他开发者交流心得。
原文地址：https://medium.com/full-stack-forge/stop-using-tailwind-like-a-beginner-heres-how-pros-do-it-4d2b6c712fa7
原文作者： Daniel Scott
发表于 5 小时前
|
查看: 0|
回复: 0
