六个讨厌 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。

7、题外话：一款快速软件开发外挂

近10年间，甚至连传统企业都开始大面积数字化时，我们发现开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

针对这类问题，低代码把某些重复出现的场景、流程，具象化成一个个组件、api、数据库接口，避免了重复造轮子。极大的提高了程序员的生产效率。

推荐一款程序员都应该知道的软件JNPF快速开发平台，采用业内领先的SpringBoot微服务架构、支持SpringCloud模式，完善了平台的扩增基础，满足了系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力；采用前后端分离模式，前端和后端的开发人员可分工合作负责不同板块，省事又便捷。

体验官网：https://www.jnpfsoft.com/?zhihu

还没有了解低代码这项技术可以赶紧体验学习！