Tailwind CSS 真有那么好吗？讨厌它的前六大原因

前端小智@大迁世界

发布于 2024-02-12 00:29:36

2.9K035

代码可运行

文章被收录于专栏：终身学习者终身学习者

运行总次数：35

代码可运行

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验

Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快、更轻松地创建自定义设计。然而，并不是每个人都对 Tailwind CSS 感到满意。事实上，有很多原因让你应该避免使用它，而坚持使用纯 CSS 或其他框架。以下是你应该讨厌 Tailwind CSS 的主要原因：

它失去了 HTML 和 CSS 的语义
它在你的 HTML 中大量添加类
它不具有可扩展性和可重用性
它生成的 CSS 文件庞大，影响性能
它只适合那些不想理解和学习 CSS 的人
它有一个庞大的库，学习普通的 CSS 更容易

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

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

Used Link Reader 以下是文章的翻译和润色：

😡 为什么讨厌 Tailwind CSS 的前六大原因

它失去了 HTML 和 CSS 的语义它在你的 HTML 中大量添加类它不具有可扩展性和可重用性它生成的 CSS 文件庞大，影响性能它只适合那些不想理解和学习 CSS 的人它有一个庞大的库，学习普通的 CSS 更容易

它失去了 HTML 和 CSS 的语义

然而，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，你可以使用语义化和描述性的类名，这些类名反映了你的元素的含义和功能：

<div class="card">
  <img class="card-image" src="some-image.jpg" alt="Some image">
  <div class="card-content">
    <div class="card-title">某标题</div>
    <p class="card-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">
  点击我
</button>

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

<button class="btn-blue">
  点击我
</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">
  蓝色按钮
</button>

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  红色按钮
</button>

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

与此相比，在纯 CSS 中，你可以为两个按钮使用单个类名，并使用修饰符或变量进行不同的变体：

<button class="btn btn-blue">
  蓝色按钮
</button>

<button class="btn btn-red">
  红色按钮
</button>

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

4. 它生成的 CSS 文件庞大，影响性能

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

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

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

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

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

以下是文章的翻译：

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

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