仅用于站内搜索，没有排版格式，具体信息请跳转上方微信公众号内链接
来源|大迁世界
作者|前端小智
Tailwind在2017年刚出现时，是一次巧妙的尝试。当时的网页开发充斥着臃肿的HTML、CSS和JavaScript，全局样式表让代码一片混乱。然而，如今的主流前端开发（React、Vue和Angular等框架）早已转向了组件化的模式。在这种模式下，Tailwind不仅帮助不大，反而成了一种技术债务。下面就深入分析一下，为什么编写有作用域的、语义化的CSS才是更好的选择。
最近，关于CSS和Tailwind的讨论逐渐多了起来，尤其是思考Tailwind在复杂精细的设计场景下为何难以维护。为了更清晰地讨论，先回顾一下Tailwind诞生的背景与初衷。
2017年8月7日，AdamWathan在介绍Tailwind时提到了它相较传统CSS的优势：
CSS本身就与HTML紧密耦合，所以将样式内联进HTML是合理的。
CSS类名的命名复杂又重复。
不同组件常有相似样式，但用CSS很难复用。
CSS有层叠的继承结构，子元素覆盖父元素的样式容易造成混乱。
全局的语义化CSS类名不如小型工具类好用。
CSS提供的无限选项反而不利于设计系统的标准化。
单次使用的元素（比如导航栏）没必要特意起类名。
然而，理解Tailwind问世的时代背景非常关键。
2017-2018年前后，网页开发主要靠Wordpress、Bootstrap和jQuery。React虽然早在2015年左右便逐渐普及，但Vue和Angular是到2016年才逐步受到关注的。人们逐渐意识到臃肿的HTML和CSS文件难以维护，开始探索新的模式。
当时的几个解决方案：
Bootstrap提供标准组件和样式变量，减少冗余代码。
jQuery封装通用功能，简化JavaScript。
React、Vue和Angular等框架转向组件化开发，提供组件级CSS作用域方案（如styled-components和CSSmodules）。
Tailwind则试图以工具类方式，降低臃肿HTML与CSS的混乱程度。
简单来说，Tailwind最初想解决的并不是组件化带来的问题，而是传统大规模网站代码混乱的问题。这就说明了它为何与如今的组件化开发模式有冲突。
过去，全局CSS和HTML文件极其庞大，内联工具类确实能简化。但组件化时代，CSS与组件绑定，有明确的作用域，完全可以做到清晰简洁：
而用Tailwind时：
此时，组件的功能变得模糊不清，维护难度也随之上升。
早期CSS类名必须唯一、明确，BEM等命名方式应运而生。然而组件化模式中，CSS作用域已限定在组件内，类名只需表达组件含义即可，简短语义化的名字反而使维护更容易：
组件之间互不干扰，Tailwind鼓励的内联类名方式，反而让HTML意义变得不清晰。
组件化架构本身支持样式复用，复用的不再只是样式，而是组件本身。通过内容投影、插槽（slot）和设计变量，就能灵活复用样式与布局：
此时，组件已自带稳定统一的设计风格，不需要额外的工具类。
Tailwind诞生的原因之一是避免复杂CSS层叠。然而，组件化开发中CSS已经是扁平结构了：
完全不存在全局样式混乱的问题，Tailwind在这里无用武之地。
Tailwind的核心论点是“小型工具类胜过全局语义类”。但组件化架构根本不存在全局样式表，每个组件都有独立样式，Tailwind再次多余。
Tailwind确实限制了样式选项，但这不一定好。通过设计令牌和CSS变量，本来就能轻松实现设计约束：
Tailwind的限制反而增加了开发复杂度。
像导航栏这样单次使用的元素，依然应该被清晰地封装成组件，而非散乱地堆叠大量工具类。组件化架构鼓励明确的组件划分和功能封装，Tailwind在此毫无优势。
组件化架构实现了更高层次的抽象，能更清晰地表达应用的功能与设计意图：
代码清晰，便于维护。
组件自带作用域，样式不会冲突。
CSS变量与设计系统保证风格统一。
好的命名本身就是最佳的代码文档。
轻松处理高保真设计需求。
而Tailwind仅仅提供了CSS属性的简化别名，额外增加了维护负担，在组件化时代并不提供真正的价值。
如果是快速原型或WordPress类网站，Tailwind可能仍然适合。
如果开发的是现代化的、可扩展的组件化应用，使用纯CSS（或SCSS）结合组件封装将更适合。
需要注意的是，如果坚持用Tailwind，将可能面临：
代码杂乱，维护困难
组件功能不清晰，职责混乱
高保真设计时不得不回退到纯CSS
最终产生多种样式来源，导致更多维护负担
总之，2025年的前端世界中，组件化CSS才是真正高效、清晰且长期可维护的架构之选。相比之下，Tailwind正逐渐变成技术债务，而非技术资产。
好啦，今天的内容分享就到这，感觉不错的同学记得分享点赞哦！
PS：程序员好物馆持续分享程序员学习、面试相关干货，不见不散！
点分享
点收藏
点点赞
点在看
