Tailwind CSS是一个流行的实用主义优先的CSS框架，声称可以帮助你更快更容易地创建自定义设计。然而，有时候Tailwind CSS并不那么令人满意。事实上，有很多原因可以解释为什么你应该避免使用它，而坚持使用纯CSS或其他框架。以下是六个可能会让你讨厌Tailwind CSS的原因。
1. 它失去了HTML和CSS的语义
2. 它用大量的类污染了你的HTML
3. 它不是可伸缩和可重用的
4. 它产生巨大的CSS文件，损害性能
5. 它只适合那些不想理解和学习CSS的人
6. 它有一个巨大的库，更容易地学习普通的CSS
它失去了HTML和CSS的语义
网站开发的主要原则之一是将网站的结构、表现和行为分开。HTML用于提供内容的结构和含义，CSS用于提供元素的表示和外观，JavaScript用于提供网站的行为和交互性。
然而，Tailwind CSS违背了这一原则，因为它将表示与结构混合在一起。Tailwind CSS没有使用有意义和描述性的类名来反映元素的用途和功能，而是使用一般性和隐晦的类名来描述它们的外观。例如，在Tailwind CSS中，一个简单的卡片组件是这样的：
class=
"max-w-sm rounded overflow-hidden shadow-lg">
![]()
class=
"w-full" src=
"some-image.jpg" alt=
"Some image">
class=
"px-6 py-4">
class="font-bold text-xl mb-2">Some title
class="text-gray-700 text-base">Some text
类名不会告诉你任何有关元素的含义或功能的信息。他们只告诉你他们长什么样。这使得理解和维护代码变得困难，因为你必须记住每个类的作用以及它们如何影响组件的布局和设计。
与普通CSS相比，在普通CSS中，你可以使用语义和描述性的类名来反映元素的含义和功能：
class=
"card">
![]()
class=
"card-image" src=
"some-image.jpg" alt=
"Some image">
class=
"card-content">
class="card-title">Some title
class="card-text">Some text
通过查看每个元素的类名，你可以很容易地知道每个元素的作用，还可以通过编辑CSS文件来更改其外观。
它用大量的类污染了你的HTML
对Tailwind CSS的一个主要批评是，它迫使你编写由几十个实用程序类组成的HTML，使其难以阅读和维护。例如，在Tailwind CSS中，一个简单的按钮是这样的：
与普通CSS相比，在普通CSS中，你可以使用单个类名并在单独的文件中定义样式：
普通CSS比Tailwind CSS更简洁和语义化。通过查看按钮的类名，可以很容易地知道按钮的作用，还可以通过编辑CSS文件更改按钮的外观。使用Tailwind CSS时，你必须记住大量的类名及其含义，并且每次想要调整设计时都必须修改HTML。
Tailwind CSS提倡将所有样式放在HTML中，而不是将它们分离到不同的文件或层中。这违背了web开发的核心原则之一：关注点分离。将表示与内容混合在一起，就违反了代码的模块化和可维护性。在不同的上下文中或设备中重用或重写样式也变得更加困难。
它不是可伸缩和可重用的
Tailwind CSS的另一个问题是它不具有可扩展性和可重用性。Tailwind CSS鼓励你通过对每个元素应用多个实用工具类来对其单独设置样式。但是，这会导致代码中的重复和不一致，因为你必须为类似的元素重复相同的类，或者为不同的变体稍微更改它们。
例如，假设你有两个看起来相似但颜色不同的按钮：
除了背景颜色不同，两个按钮都有相同的类。这意味着你必须为每个按钮重复相同的类，使你的代码冗长和冗余。此外，如果你想要更改按钮的某些内容，例如字体大小或边框半径，则必须在多个地方进行更改，这会使代码容易出现错误和不一致。
与普通CSS相比，在普通CSS中，你可以为两个按钮使用一个类名，并为不同的变体使用修饰符或变量：
你可以为两个按钮使用一个类名，并为不同的变体使用修饰符或变量。这使你的代码简洁一致，并且你可以在一个地方更改有关按钮的某些内容。
它产生巨大的CSS文件，损害性能
Tailwind CSS的另一个缺点是它会生成巨大的CSS文件，这会对网站的性能产生负面影响。Tailwind CSS提供了数以千计的实用程序类，它们几乎涵盖了所有可能的样式变化。然而，这些类中的大多数都不会在你的项目中使用，它们只会给你的CSS文件增加不必要的膨胀。
