六个讨厌 Tailwind CSS 的理由

Tailwind CSS 是一个流行的实用主义优先的 CSS 框架，声称可以帮助你更快更容易地创建自定义设计。然而，有时候 Tailwind CSS 并不那么令人满意。事实上，有很多原因可以解释为什么你应该避免使用它，而坚持使用纯 CSS 或其他框架。以下是六个可能会让你讨厌 Tailwind CSS 的原因。

1. 它失去了 HTML 和 CSS 的语义

2. 它用大量的类污染了你的 HTML

3. 它不是可伸缩和可重用的

4. 它产生巨大的 CSS 文件，损害性能

5. 它只适合那些不想理解和学习 CSS 的人

6. 它有一个巨大的库，更容易地学习普通的 CSS

1、它失去了 HTML 和 CSS 的语义

网站开发的主要原则之一是将网站的结构、表现和行为分开。HTML 用于提供内容的结构和含义，CSS 用于提供元素的表示和外观，JavaScript 用于提供网站的行为和交互性。

然而，Tailwind CSS 违背了这一原则，因为它将表示与结构混合在一起。Tailwind CSS 没有使用有意义和描述性的类名来反映元素的用途和功能，而是使用一般性和隐晦的类名来描述它们的外观。例如，在 Tailwind CSS 中，一个简单的卡片组件是这样的：

<div class="max-w-sm rounded overflow-hidden shadow-lg"> <img class="w-full" src="some-image.jpg" alt="Some image"> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2">Some title</div> <p class="text-gray-700 text-base">Some text</p> </div></div>

类名不会告诉你任何有关元素的含义或功能的信息。他们只告诉你他们长什么样。这使得理解和维护代码变得困难，因为你必须记住每个类的作用以及它们如何影响组件的布局和设计。

与普通 CSS 相比，在普通 CSS 中，你可以使用语义和描述性的类名来反映元素的含义和功能：

<div class="card">  <img class="card-image" src="some-image.jpg" alt="Some image">  <div class="card-content">    <div class="card-title">Some title</div>    <p class="card-text">Some text</p>  </div></div>

通过查看每个元素的类名，你可以很容易地知道每个元素的作用，还可以通过编辑 CSS 文件来更改其外观。

2、它用大量的类污染了你的 HTML

对 Tailwind CSS 的一个主要批评是，它迫使你编写由几十个实用程序类组成的 HTML，使其难以阅读和维护。例如，在 Tailwind CSS 中，一个简单的按钮是这样的：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">  Click me</button>

与普通 CSS 相比，在普通 CSS 中，你可以使用单个类名并在单独的文件中定义样式：

<button class="btn-blue">  Click me</button>

普通 CSS 比 Tailwind CSS 更简洁和语义化。通过查看按钮的类名，可以很容易地知道按钮的作用，还可以通过编辑 CSS 文件更改按钮的外观。使用 Tailwind CSS 时，你必须记住大量的类名及其含义，并且每次想要调整设计时都必须修改 HTML。

Tailwind CSS 提倡将所有样式放在 HTML 中，而不是将它们分离到不同的文件或层中。这违背了 web 开发的核心原则之一：关注点分离。将表示与内容混合在一起，就违反了代码的模块化和可维护性。在不同的上下文中或设备中重用或重写样式也变得更加困难。

3、它不是可伸缩和可重用的

Tailwind CSS 的另一个问题是它不具有可扩展性和可重用性。Tailwind CSS 鼓励你通过对每个元素应用多个实用工具类来对其单独设置样式。但是，这会导致代码中的重复和不一致，因为你必须为类似的元素重复相同的类，或者为不同的变体稍微更改它们。

例如，假设你有两个看起来相似但颜色不同的按钮：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">  Blue button</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">  Red button</button>

除了背景颜色不同，两个按钮都有相同的类。这意味着你必须为每个按钮重复相同的类，使你的代码冗长和冗余。此外，如果你想要更改按钮的某些内容，例如字体大小或边框半径，则必须在多个地方进行更改，这会使代码容易出现错误和不一致。

与普通 CSS 相比，在普通 CSS 中，你可以为两个按钮使用一个类名，并为不同的变体使用修饰符或变量：

<button class="btn btn-blue">  Blue button</button>
<button class="btn btn-red">  Red button</button>

你可以为两个按钮使用一个类名，并为不同的变体使用修饰符或变量。这使你的代码简洁一致，并且你可以在一个地方更改有关按钮的某些内容。

4、它产生巨大的 CSS 文件，损害性能

Tailwind CSS 的另一个缺点是它会生成巨大的 CSS 文件，这会对网站的性能产生负面影响。Tailwind CSS 提供了数以千计的实用程序类，它们几乎涵盖了所有可能的样式变化。然而，这些类中的大多数都不会在你的项目中使用，它们只会给你的 CSS 文件增加不必要的膨胀。

根据官方文档，默认的 Tailwind CSS 文件大小超过 2.4 MB，这对于生产网站来说太大了。即使在缩小和压缩文件之后，它仍然保持在 46 kB 左右，这仍然比大多数其他 CSS 框架大。

为了减少文件的大小，Tailwind CSS 建议使用一个名为 PurgeCSS 的工具，它可以扫描 HTML 文件，并从 CSS 文件中删除任何未使用的类。然而，这为你的构建过程增加了一个额外的步骤，并且如果 PurgeCSS 未能检测到在你的代码中动态地或有条件地使用的一些类，它也会引入错误。

5、它只适合那些不想理解和学习 CSS 的人

Tailwind CSS 对你的 CSS 学习和理解也有负面影响。通过使用 Tailwind CSS，你基本上依赖于一个声称是 CSS 样式替换的框架，但实际上仍然需要你了解 CSS 样式才能使用它。例如，你仍然需要知道如何使用 flexbox、grid 或 position 属性来布局元素，但不是直接在 CSS 文件中使用它们，而是必须使用模仿它们的 Tailwind CSS 类。

这不仅令人困惑，而且具有误导性。你不是在学习实际的 CSS 属性和值，而是学习 Tailwind CSS 类及其含义。这可能会让你认为你了解 CSS，但实际上，你只熟悉 Tailwind CSS。如果你遇到 Tailwind CSS 不提供你需要的类的情况，或者如果你想切换到另一个框架或工具，你将很难理解或编写实际的 CSS 代码。

6、它有一个巨大的库，更容易学习正常的 CSS

Tailwind CSS 为每个可能的场景提供了数千个实用程序类，但这也意味着你必须记住或查找所有这些类及其含义。这可能会让人不知所措，而且非常耗时，特别是如果你是 web 开发的新手的话。

此外，Tailwind CSS 不遵循 CSS 的标准命名约定或语法。例如，它使用冒号或括号来分隔类名中的单词，而不是破折号或驼峰式大小写。它不使用百分比或像素来指定值，而是使用任意数字或字母。这会使你的代码看起来不一致和不熟悉。

相比之下，学习普通的 CSS 要简单得多，也更直观。你只需要学习被标准化并被浏览器广泛支持的基本属性和值。你还可以使用自定义属性或变量来创建适合你需要的自己的命名约定和值。你还可以使用在线资源或工具以交互式和可视化的方式学习和练习 CSS。