关注「索引目录」公众号，获取更多干货。
一场关于权衡取舍的坦诚讨论，无人问津。
介绍
在生产环境中使用 Tailwind CSS 五年后，我对大规模应用实用型 CSS 有了一些深刻的体会。这并非又一次对 Tailwind 的“贬低”，而是一次坦诚的探讨，探讨这个流行的框架何时会暴露出它的局限性。
免责声明：我没有确切的指标可以分享（有保密协议），但我会带你了解我们遇到的实际模式和问题。
优点：我们为什么选择 Tailwind
首先，我们必须肯定 Tailwind CSS 的贡献。它兑现了许多承诺：
- 快速原型制作
——构建用户界面从未如此之快 - 无需切换上下文
——请留在您的 HTML/JSX 文件中 - 间距一致
——设计系统已内置。 - 学习曲线平缓
——新开发者可以立即做出贡献
最初几个月，这感觉像是一场革命。
现实检验：规模效应来袭时
1. 可读性问题
以下是我们组件最初的样貌：
// A real card component from our codebase
<article className="relative flex flex-col min-w-0 rounded-lg break-words border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 md:flex-row md:items-center md:justify-between hover:shadow-lg transition-shadow duration-200">
<div className="flex-1 p-4 md:p-6 lg:p-8">
<h2 className="text-lg md:text-xl lg:text-2xl font-semibold text-gray-900 dark:text-white mb-2">
{title}
</h2>
<p className="text-sm md:textbase text-gray-600 dark:text-gray-300 line-clamp-3">
{description}
</p>
</div>
</article>问题？
-
你能一眼看出这个组件的功能吗？ -
如果只修改桌面布局，你会怎么做？ -
组件样式在哪里结束，实用类在哪里开始？
2. 维护挑战
想想我们过去几个月遇到的这种情况：
设计团队：“我们需要更新所有卡片的阴影效果，使其更加柔和。”
使用 Tailwind：搜索shadow-sm，，shadow-lg跨hover:shadow-xl：
-
成分 -
模板 -
随机效用组合 -
我们定制的第三方组件
使用 CSS Modules：更新一个变量：
:root {
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}3. 捆绑包大小讨论
虽然 Tailwind 的 PurgeCSS 功能令人印象深刻，但以下几点却鲜为人知：
// What your HTML looks like
<div className="p-4 md:p-6 lg:p-8 xl:p-10 2xl:p-12">
// What CSS gets generated (simplified)
.p-4 { padding: 1rem; }
.md\:p-6 { padding: 1.5rem; }
.lg\:p-8 { padding: 2rem; }
.xl\:p-10 { padding: 2.5rem; }
.2xl\:p-12 { padding: 3rem; }与现代CSS相比：
.container {
padding: clamp(1rem, 4vw, 3rem);
}一行代码对比五个类。将此结果乘以应用程序中每个响应式属性。
那些伤害我们的模式
反模式一：复制粘贴文化
新开发者会效仿这种做法：
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">而不是使用：
<Button variant="primary">结果：按钮实现方式在各处都不一致。
反模式 2：组件蔓延
// What we ended up with across different files
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="bg-white p-4 rounded shadow-sm">
<div className="bg-white p-8 rounded-xl shadow-lg">结果：原本应该是一个可重用组件，结果却出现了三个略有不同的“卡片”组件<Card>。
反模式3：响应式疯狂
<div className="text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl p-2 md:p-4 lg:p-6 xl:p-8 2xl:p-10 m-1 md:m-2 lg:m-3 xl:m-4 2xl:m-5">将其与现代 CSS 进行比较
.responsive-text {
font-size: clamp(0.875rem, 2.5vw, 1.5rem);
padding: clamp(0.5rem, 4vw, 2.5rem);
margin: clamp(0.25rem, 1vw, 1.25rem);
}真实数据：英国开发商怎么说
------------------------至---------------------
根据最近的调查数据，英国与美国和德国一起，位列参与开发者调查的前三名国家之列。 《2024 年 CSS 现状调查现已开放》——WP Tavern。以下是数据揭示的内容：
使用情况实际情况：虽然 75% 的使用率看起来很惊人，但只有 50% 的调查受访者实际回答了 Tailwind 的问题。
这意味着实际使用率接近所有开发者的 37.5% 🔍 浏览“CSS 现状”结果… • Josh W. Comeau — 意义重大，但并非某些人声称的绝大多数。
维护问题确实存在：正如一位开发人员所说：
“我真的努力尝试喜欢上 Tailwind。我也理解它的功能和优点。但对我来说，代码可读性才是最重要的。我不习惯我的 HTML/JSX/或其他代码里塞满数不清的类。那简直乱得一塌糊涂。”
当 Tailwind 真正发挥作用时
公平地说，Tailwind 并非总是错误的选择：
- 快速原型制作
——适用于黑客马拉松和概念验证 - 团队规模小，CSS知识有限。
- 采用简单设计系统的项目
- 维护需求极低的营销网站
关键见解：它非常适合兼容简单 CSS 且维护成本低的项目，对于 CSS 知识匮乏或分配给 CSS 架构的资源有限的前端团队来说，它是理想之选。
我的解决方案：混合方法
经过几年纯粹的 Tailwind 开发，我们正朝着以下方向发展：
组件优先架构
// Instead of this Tailwind mess
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
// We use this <Button variant="primary">Submit</Button>用于主题的 CSS 自定义属性
:root { --color-primary: #3b82f6;
--spacing-card: clamp(1rem, 4vw, 2rem);
--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}现代 CSS 特性
.container {
container-type: inline-size;
padding: clamp(1rem, 5vw, 3rem);
}
.card { padding: var(--spacing-card);
box-shadow: var(--shadow-card);
}
@container (min-width: 768px) {
.card-content {
display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;
}
}最终判决
Tailwind CSS 本身并没有错——它在某些特定用例中表现出色。然而，当开发者在没有针对大规模部署的既定模式的情况下采用 Tailwind 时，“曾经感觉是生产力提升，现在却感觉是技术债务”的情况非常普遍。Wisp CMS 提供了大型项目中使用 Tailwind CSS 的最佳实践。
残酷的现实是？对于大型项目而言，传统的 CSS 架构通常能提供更好的长期可维护性、性能和开发者体验。
在选择 Tailwind 之前，请先问问自己：
-
这个项目是否需要进行重大设计更新？ -
我们团队里有资深的CSS开发人员吗？ -
我们是否正在构建一个可在多个项目中使用的设计系统？ -
我们需要对样式进行精细控制吗？
如果您对以上任何问题回答“是”，请考虑使用现代 CSS 方法。
记住：目标不是使用最流行的工具，而是构建可维护、高性能的网站，为用户提供良好的服务。
您在大规模使用 Tailwind 方面有什么经验？您是否遇到过类似的挑战，或者找到了有效的解决方案？欢迎在下方评论区分享您的想法。
关注「索引目录」公众号，获取更多干货。