顺风？我会通过

最近，我在一个项目中使用了Tailwindcss，你知道吗？至少可以说，这是一次令人大开眼界的经历。

有些人可能想知道：Tailwindcss 是什么？

Tailwind CSS 是迄今为止增长最快的CSS库。它已迅速成为前端开发人员的必备工具。许多前端开发人员在大型项目中使用它，遇到的问题很少。无可否认，它对网站和网络应用程序开发和设计的增强是显着的。

所以有什么问题？为什么标题说“ Tailwindcss？”不，谢谢”？

这个标题表明，尽管 Tailwind CSS 非常出色，但在某些情况下它可能不是您项目的最佳选择。为什么会这样呢？有一个答案。然而，在我们深入解释之前，让我们为这项技术的检查奠定基础。

所有的 CSS 是怎么回事？

在我们了解Tailwindcss及其开发复杂性之前，我们必须满足一些先决条件。

什么是CSS？

CSS 代表层叠样式表。我认为 CSS 的最佳定义来自techterms.com

“CSS 是一种样式表语言，用于格式化 HTML 网页中的内容。 CSS 样式表可以独立于内容本身定义文本、表格和其他元素的外观和格式。样式可以在网页的 HTML 文件中或在多个网页引用的单独文档中找到”。

简而言之：CSS 是一种样式语言。您可以在HTML元素上使用 CSS 来使您的网页或 Web 应用程序看起来很棒。

什么是 Tailwindcss？

用Tailwindcss 团队自己的话说，Tailwindcss 是“一个实用程序优先的 CSS 框架，包含flex 、 pt-4 、 text-center和rotate-90等类，可以直接在标记中组合以构建任何设计”。

这本质上意味着 tailwind CSS 采用原始 CSS 程序和操作，然后使它们更易于执行和实现。

我们已经讨论了 CSS 和 Tailwind CSS 的基础知识。现在，让我们更深入地研究并研究 Tailwind CSS 及其相应的 CSS 对应项在实践中是如何运行的。这种探索最终将引导我们得出我在涉及 Tailwind CSS 的项目中得出的结论。

我的结论是 Tailwind CSS 最适合更大、更复杂的前端项目。然而，大多数情况下的默认选择仍然应该是“vanilla”CSS。换句话说，与任何其他库（无论是 Tailwind CSS 还是其他库）相比，使用最纯粹的 CSS 形式通常对大多数个人和场景更有优势。

CSS 和 Tailwindcss 之间的区别

Tailwindcss 是什么样子的？让我们通过制作一个普通的 CSS 等效项和一个 Tailwindcss 等效项来进行比较。

让我们分解一下上面的文本中发生了什么。这是HTML 5 的摘录，我们正在构建一个按钮。

为了构建按钮，我们通过“ div ”进行设置——本质上是小容器，用于输入用于更改我们的网站或网络应用程序的内容。我们为每个 div 提供了自己的“类”，这样我们就可以稍后在单独的 CSS 文件中引用该特定元素。不过，您也可以为 div 指定自己的“ id ”。您可以进行“内联”CSS 更改，这意味着您可以将 CSS 直接放入 HTML 文件中，但出于组织目的，大多数人倾向于避免这样做。

在 CSS 文件中，我们编辑按钮的代码是什么样的？

在上面的代码中，我们正在与 HTML 摘录中的按钮类进行交互。让 CSS 文件识别 HTML 类的方法是在类名本身的开头加一个点。下面，我们按顺序使用“ align-items ”将按钮与 div 的中心对齐。在align-item下面是“背景剪辑”，它定义了“背景颜色”将延伸到多远而不是延伸多远。 “边框”是按钮侧面的厚度，边框半径是边缘的弯曲程度。我们刚才提到的所有内容都有助于开发按钮样式。正如我们所看到的，原始的 CSS 样式看起来很简单。 Tailwindcss 如何处理同样的情况？

等等，什么？我们是否只是将类似 CSS 的代码放入 HTML 文件中？是的我们做了。您所看到的内容与 Tailwindcss 中之前的代码示例相同。这其实是Tailwindcss比较独特的属性之一。使用 Tailwindcss 时，您无需将单独的 CSS 代码放入不同的文件中。您的所有 Tailwindcss 代码都直接进入您的 HTML 文件。正如我们之前所说，开发人员传统上会避免内联CSS 编码。有了 Tailwindcss，内联编码不再是一个真正的选择，它几乎是必要的。 Tailwindcss完全通过类识别来实现。

现在，上面的代码做了什么？它的作用与原始 CSS 代码的作用完全相同，尽管略有不同。

让我们再看一下常规 CSS 与 Tailwindcss 对应项。

在上图中，我们在HTML5文档中导入了“ card-img ”类下的巧克力图片。让我们看看对应的 CSS 是什么样子的。

上面的 CSS 代码与上一个类似。不需要太深入的推断。我们正在定义巧克力卡的外观。现在让我们看看更有趣的 Tailwindcss 变体。

上面的代码是 Tailwindcss 的等效代码。它更简单、更优雅，但需要更多的努力来了解一切的含义以及如何定位陈述。那么这是它相对于传统 CSS 的优势吗？

Tailwindcss 的本质使其非常混乱。您的所有代码（包括 HTML 和 CSS）都将位于一个文件中，并且会很长且看起来很拥挤。这使得开发变得困难。

Tailwindcss 的主要缺点是什么？

• 陡峭的学习曲线需要时间来适应。
• 必须制作自定义类组件。 （对于一个长期项目来说，这可能会增加很多）。
• 令人困惑，因为 HTML 和样式混合在一起

它的主要优点是什么？

• 高度可定制

• 更快的发展

• 无论添加或编辑内容如何，措辞和模式都是一致的。

  
  

我们已经看到了 Tailwindcss 的示例，现在我们知道了它的主要优点和缺点。但是，它有多受欢迎？

它已被新老开发人员采用并扩散。

tailwindweekly.com 的 Vivian Guillen表示，截至 2022 年 11 月 19 日，Tailwindcss 的每周下载量已达到 450 万次。在我撰写本文时，如果您访问npmjs.com并搜索 Tailwindcss，则会获得 3.36 亿次下载。自 5 年前发布以来，平均每天下载量为 184,110 次。下载量令人难以置信。

顺风而行

早些时候，在本文的开头，我写道：“可能有一段时间，Tailwindcss 不是您项目的最佳解决方案”。我为什么要写这个？它与标题有何关联？ “顺风？我会通过 ”。

Tailwindcss在全球几乎所有前端开发人员中都很流行，它看起来比传统 CSS 更容易实现，并且比其他同类技术提供更多的可定制性。哎呀，我对它的使用甚至启发了这篇文章本身。那么为什么我仍然怀疑呢？当然是因为我用过它。

Tailwindcss 确实如大家所声称的那样好，甚至更多。同样，正如人们所说的那样，它也很糟糕。 Tailwindcss 的本质使其在中短期项目中使用起来很复杂，学习曲线完全阻碍了你的开发，坚持制作自定义组件等等。这些都使得 Tailwindcss在短期内难以忍受。仅限于短期！

这意味着 Tailwind CSS 应该保留给开发人员和公司承担的广泛、复杂的项目。对于较短的项目，建议遵循传统的 CSS。这可以防止您的 CSS 技能减弱，并避免过度依赖 Tailwind CSS 等快捷框架。你为什么要相信我？我挑战自己在一个小型项目中使用 Tailwind CSS，它真正强调了为什么它更适合实质性、持久的企业。我很高兴能够深入研究其他 CSS 框架，甚至可能撰写有关它们的文章！

您可以查看是否订阅我，我们很快就会见面;)