CSS 框架一直扮演着重要角色，从最初的 Bootstrap 到如今流行的 Tailwind CSS，每一种框架都有其独特的风格。
然而，Tailwind CSS 作为一个实用优先的框架，引发了开发者之间的热烈讨论。有些人对它爱不释手，而另一些人则避而远之。今天就来探讨 Tailwind CSS 的优点和缺点，分析为何它如此两极分化。
优缺分析
对 Tailwind CSS 可以从以下几个方面进行探讨：
- • 编码方式
- • 样式冲突
- • 扩展性
- • 耦合度
- • 学习曲线
- • 复杂需求处理
独特、高效的开发体验✅️
Tailwind CSS 最大亮点莫过于它能够显著提升开发效率。通过直接在 DOM 元素上使用预定义的原子化类名，则可以快速构建和调整界面，而无需频繁切换到 CSS 文件，编码更加流畅。
此种方式特别适合那些需要快速迭代和频繁修改的项目。我在Vue和React中都使用过 Tailwind ，在构建初期就能够快速搭建出原型，极大地缩短了开发时间。
{/* React 项目使用 Tailwind： */}
<main className="w-full">
{dataSource.map((item) => (
<div className="mb-4 flex items-center" key={item.country}>
<Iconify icon={item.iconify} size={30} />
<span className="mx-2 font-medium">{item.country}</span>
<div className="ml-auto flex">
<div className="flex items-center justify-center">
{platformIcon('android')}
{item.android}
</div>
</div>
</div>
))}
</main>
冲突减少：一致性和可维护性✅️
Tailwind 的设计哲学强调使用一致的原子化类名来定义界面元素的外观。每个类名只负责一个小的样式属性，减少了全局样式冲突的可能性，也不需要担心样式覆盖的问题。
除类名编写外，项目中的颜色、间距、排版等设计标准都可以通过配置文件统一管理，可维护性大大提高。
灵活可定制✅️
Tailwind 提供了丰富的配置选项，允许开发者通过配置文件自定义几乎所有的工具类，这种灵活性使得它可以适应不同类型的项目。无论是简单的静态页面还是复杂的 Web 应用程序。
同时，Tailwind 也可以通过插件机制进行扩展，业务功能需求这方面可以轻松实现。
theme: {
extend: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
colors: {
customColor: "red", //自定义颜色类
pink: 'black' //覆盖默认pink
},
fontFamily: {
sans: ["sans-serif"], //覆盖默认字体
eb: ["Eb Garamond"], //新增字体类
},
},
},
代码耦合度增加❌️
样式类名直接嵌入到 HTML 中，使得 DOM 元素中充斥着大量样式类，不过我们开发中的 DOM 元素还会有很多其他属性或状态需要绑定。这种方式必定会导致代码变得难以阅读和维护，特别是在大型项目中。
<div className="bg-white max-w-sm overflow-hidden rounded p-6 shadow-lg">
<h1 className="mb-4 text-xl font-bold text-gray-800">Card Title</h1>
<p className="mb-4 text-base text-gray-600">
This is a simple card with some text content. Tailwind CSS allows you to style elements
directly in your HTML.
</p>
<button className="bg-blue-500 hover:bg-blue-700 text-white rounded px-4 py-2 font-bold">
Button
</button>
</div>
虽说 也可以使用内置的指令来提取样式类，不过这种方式与编写CSS样式表没什么不同。
@layer components {
.re-image {
@apply w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700;
}
}
<img class="re-image" src='./1.png' />
传统的样式表虽说需频繁切换css文件编写代码，但是没有违背分离关注点原则，可以更好地组织代码和维护项目。Tailwind 这种做法虽然方便了快速开发，但也破坏了这种分离，可能会让习惯传统开发方式的开发者感到不适应。
学习曲线与依赖性❌️
对于没有使用过实用优先框架的开发者来说，Tailwind 的学习曲线可能会比较陡峭。
虽说文档详尽且易于理解，原子化样式类名都是符合语义化的，但是对于特殊样式如伪类、动画，还有语义相近的样式记住大量的类名以及理解其背后的设计理念仍然需要时间。
此外，过度依赖 Tailwind 可能会让开发者忽视对 CSS 基础知识的学习，进而影响在不使用 Tailwind 的项目中的表现。
复杂需求处理❌️
Tailwind 终究不是内置所有CSS样式的样式类，有些无法直接使用的情况，亦或是对于一些复杂的设计需求，可能需要编写自定义配置或附加样式。这种情况下，直接编写 CSS 可能会更高效、更直观。
比如修改第三方组件库的样式时，使用 Tailwind 就显示乏力，这时最简单的解决方式还是使用css样式表。
// 修改antd组件样式
const StyledUpload = styled.div<{ $thumbnail?: boolean }>`
.ant-upload {
border: none !important;
}
.ant-upload-list {
display: ${(props) => (props.$thumbnail ? 'flex' : 'block')};
flex-wrap: wrap;
}
`;
发展前景
来看看一些关于 Tailwind CSS 的 Github 数据：
Tailwind CSS 的 GitHub stars 高达80k+， 数量庞大，几乎随着时间呈线性增长，表明它得到了广泛的社区支持和认可。
并且最近28天也在频繁的更新和改进，项目的活跃度高，有持续的改进，吸引更多开发者加入并使用它。
总结
总的来说，它打破了传统的 CSS 开发模式，带来了更高效、更灵活的开发体验，是一个具有革新意义的工具。
在我看来，Tailwind CSS 值得研究和使用，但它并非适用于所有场景，在选择使用之前还是一个根据实际情况进行权衡。
如果想了解 Tailwind CSS 语法可以阅读之前的文章：juejin.cn/post/739998…
