最近，我在一个项目中使用了Tailwindcss，你知道吗？至少可以说，这是一次令人大开眼界的经历。 有些人可能想知道：Tailwindcss 是什么？  Tailwind CSS 是迄今为止增长最快的 库。它已迅速成为前端开发人员的必备工具。许多前端开发人员在大型项目中使用它，遇到的问题很少。无可否认，它对网站和网络应用程序开发和设计的增强是显着的。 CSS 所以有什么问题？为什么标题说“  ”？ Tailwindcss？”不，谢谢 这个标题表明，尽管 Tailwind CSS 非常出色，但在某些情况下它可能不是您项目的最佳选择。为什么会这样呢？有一个答案。然而，在我们深入解释之前，让我们为这项技术的检查奠定基础。 所有的 CSS 是怎么回事？ 在我们了解 及其开发复杂性之前，我们必须满足一些先决条件。 Tailwindcss 什么是CSS？  CSS 代表层叠样式表。我认为 CSS 的最佳定义来自 techterms.com  “CSS 是一种样式表语言，用于格式化 HTML 网页中的内容。 CSS 样式表可以独立于内容本身定义文本、表格和其他元素的外观和格式。样式可以在网页的 HTML 文件中或在多个网页引用的单独文档中找到”。 简而言之：CSS 是一种样式语言。您可以在 元素上使用 CSS 来使您的网页或 Web 应用程序看起来很棒。 HTML 什么是 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 之间的区别   让我们通过制作一个普通的 CSS 等效项和一个 Tailwindcss 等效项来进行比较。  Tailwindcss 是什么样子的？ 让我们分解一下上面的文本中发生了什么。这是 摘录，我们正在构建一个按钮。 HTML 5 的 为了构建按钮，我们通过“   ”进行设置——本质上是小容器，用于输入用于更改我们的网站或网络应用程序的内容。我们为每个 div 提供了自己的“ ”，这样我们就可以稍后在单独的 CSS 文件中引用该特定元素。不过，您也可以为 div 指定自己的“   ”。您可以进行“ ”CSS 更改，这意味着您可以将 CSS 直接放入 HTML 文件中，但出于组织目的，大多数人倾向于避免这样做。 div 类 id 内联 在 CSS 文件中，我们编辑按钮的代码是什么样的？  在上面的代码中，我们正在与 HTML 摘录中的按钮类进行交互。让 CSS 文件识别 HTML 类的方法是在类名本身的开头加一个点。下面，我们按顺序使用“   ”将按钮与 div 的中心对齐。在align-item下面是“ ”，它定义了“ ”将延伸到多远而不是延伸多远。 “ ”是按钮侧面的厚度，边框半径是边缘的弯曲程度。我们刚才提到的所有内容都有助于开发按钮样式。正如我们所看到的，原始的 CSS 样式看起来很简单。 Tailwindcss 如何处理同样的情况？  align-items 背景剪辑 背景颜色 边框 等等，什么？我们是否只是将类似 CSS 的代码放入 HTML 文件中？是的我们做了。您所看到的内容与 Tailwindcss 中之前的代码示例相同。这其实是Tailwindcss比较独特的属性之一。使用 Tailwindcss 时，您无需将单独的 CSS 代码放入不同的文件中。您的所有 Tailwindcss 代码都直接进入您的 HTML 文件。正如我们之前所说，开发人员传统上会避免 CSS 编码。有了 Tailwindcss，内联编码不再是一个真正的选择，它几乎是必要的。 Tailwindcss完全通过 来实现。 内联 类识别 现在，上面的代码做了什么？它的作用与原始 CSS 代码的作用完全相同，尽管略有不同。 让我们再看一下常规 CSS 与 Tailwindcss 对应项。  在上图中，我们在 文档中导入了“   ”类下的巧克力图片。让我们看看对应的 CSS 是什么样子的。  HTML5 card-img 上面的 CSS 代码与上一个类似。不需要太深入的推断。我们正在定义巧克力卡的外观。现在让我们看看更有趣的 Tailwindcss 变体。  上面的代码是 Tailwindcss 的等效代码。它更简单、更优雅，但需要更多的努力来了解一切的含义以及如何定位陈述。那么这是它相对于传统 CSS 的优势吗？  Tailwindcss 的本质使其非常混乱。您的所有代码（包括 HTML 和 CSS）都将位于一个文件中，并且会很长且看起来很拥挤。这使得开发变得困难。  Tailwindcss 的主要缺点是什么？ 陡峭的学习曲线需要时间来适应。 必须制作自定义类组件。 （对于一个长期项目来说，这可能会增加很多）。 令人困惑，因为 HTML 和样式混合在一起 它的 是什么？ 主要优点 高度可定制 更快的发展 无论添加或编辑内容如何，措辞和模式都是一致的。 我们已经看到了 Tailwindcss 的示例，现在我们知道了它的主要优点和缺点。但是，它有多受欢迎？ 它已被新老开发人员采用并扩散。   表示，截至 2022 年 11 月 19 日，Tailwindcss 的每周下载量已达到 450 万次。在我撰写本文时，如果您访问 并搜索 Tailwindcss，则会获得 3.36 亿次下载。自 5 年前发布以来，平均每天下载量为 184,110 次。下载量令人难以置信。 tailwindweekly.com 的 Vivian Guillen npmjs.com 顺风而行 早些时候，在本文的开头，我写道：“ 我为什么要写这个？它与标题有何关联？  可能有一段时间，Tailwindcss 不是您项目的最佳解决方案”。 “顺风？我会通过 ”。   在全球几乎所有前端开发人员中都很流行，它看起来比传统 CSS 更容易实现，并且比其他同类技术提供更多的可定制性。哎呀，我对它的使用甚至启发了这篇文章本身。那么为什么我仍然怀疑呢？ 。 Tailwindcss 当然是因为我用过它  Tailwindcss 确实如大家所声称的那样好，甚至更多。同样，正如人们所说的那样，它也很糟糕。 Tailwindcss 的本质使其在中短期项目中使用起来很复杂，学习曲线完全阻碍了你的开发，坚持制作自定义组件等等。这些都使得 Tailwindcss 难以忍受。仅限于短期！ 在短期内 这意味着 Tailwind CSS 应该保留给开发人员和公司承担的广泛、复杂的项目。对于较短的项目，建议遵循传统的 CSS。这可以防止您的 CSS 技能减弱，并避免过度依赖 Tailwind CSS 等快捷框架。你为什么要相信我？我挑战自己在一个小型项目中使用 Tailwind CSS，它真正强调了为什么它更适合实质性、持久的企业。我很高兴能够深入研究其他 CSS 框架，甚至可能撰写有关它们的文章！ 您可以查看是否 ，我们很快就会见面;) 订阅我

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

2022 - HackerNoon Contributor of the Year - Cryptocurrency

顺风？我会通过

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Claude Sonnet 3.5 系统提示泄漏：法医分析

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

比特币 UTXO 模型，为独特的生态系统提供动力

成功云迁移的完整指南：策略和最佳实践

Claude Sonnet 3.5 系统提示泄漏：法医分析

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

比特币 UTXO 模型，为独特的生态系统提供动力

成功云迁移的完整指南：策略和最佳实践

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps