CSS 3 与 Tailwind CSS 的比较

2025-06-07

CSS 3 与 Tailwind CSS 的比较

在开始本文之前,首先要注意的是:这篇文章是犯罪行为。现在,让我们开始吧。

🔰 简介

欢迎大家阅读本周的文章。我们将要讨论一个不该讨论的话题🙄:CSS 与 Tailwind CSS。前端社区里一直存在很多困惑,关于应该学什么、不应该学什么,以及“为什么”Tailwindcss 是更好的 CSS 3 并且是潜在的替代品。

我已经学过 HTML
我不想因为 Tailwind 而学习 CSS
既然已经有更好的版本(Tailwind)了,我看不出学习 CSS 有什么意义

—匿名开发者

Tailwind 应该取代 CSS,CSS 又长又无聊,而 Tailwind 很有趣,而且是同样的东西

—匿名开发者 2

我遇到过很多类似的文章(而且都同样触动人心),在 Web 开发者新手中也很常见,但这并不应该发生。让我来分析一下 CSS 和 Tailwind 是什么,以及为什么将它们进行比较是一种罪过

🌩 暴风雨前的宁静

🚀 CSS:

CSS 代表“层叠样式表”。层叠样式表用于格式化任何以标记语言编写的文档的样式、格式和布局。简而言之,CSS 可用于定义文本样式、表格大小、字体样式以及网页的其他方面。CSS 帮助 Web 开发人员在网站的多个页面上创建统一的外观。CSS 也用于格式化网页布局的其他方面。CSS 是一种编程语言。

CSS 有 3 个不同的版本,CSS 1 级于 1996 年发布,CSS 2 级是对 1 级的改进,于 2004 年作为 W3C 的候选推荐发布,CSS 3 级的第一个草案于 1999 年发布!

🏎 Tailwind CSS:

Tailwind CSS 被描述为一个实用优先的 CSS 框架。Tailwind 于 2019 年 5 月首次发布,现已成为最受欢迎的 CSS 框架,拥有超过 26.1 万名开发人员使用它来增强他们的设计系统。

实用程序优先框架提供底层实用程序类,用于在 HTML 文件中构建自定义设计。实用程序类的命名基于其预期用途,以便普通用户(大多数情况下)能够轻松理解。它们通常具有小而明确的用途,并且可以轻松地在整个应用中使用。
<div class="text-white"></div>

🌪 Tailwind 与 CSS 对比

这里要指出的第一点是,Tailwind 在很多方面都无法与 CSS 相比。

这篇文章就像一场“React vs JavaScript”的对话,一个是语言,另一个是框架。一个基本的理解,不仅在编程领域,在其他领域也一样,那就是在学习次要主题之前,总是要先学习核心基础知识。建造摩天大楼之前,无论其大小或高度如何,你总是要先打好地基。同样的理念也适用于这个问题,Tailwind 是一个实用程序类,而 CSS 是一种样式表语言。

拥有实用程序优先框架的目的是允许开发人员更快地开发自定义用户界面,并且还允许开发人员轻松构建组件。

另一个原因是,Tailwind 是数十个 CSS 实用框架之一。基于此,下一个论点是什么?你应该学习如何使用这些框架,然后完全忘掉 CSS?Tailwind 并没有教授样式设计的基础知识,在我看来,它甚至什么都没教。它向开发人员提供了功能,但如果不了解其工作原理,开发人员就永远无法理解该功能的完整实现。

TailwindCSS 非常流行,对于那些只需要一些实用类就能快速构建漂亮的自定义设计并转向应用程序其他方面的经验丰富的开发者来说,它有很多优势。虽然对于刚学完 HTML 的人来说,学习 Tailwind 本身并没有什么不好,但我认为避开 CSS 或试图与 CSS 进行比较和对比是错误的。学习所有事情的基础知识,可以让你避免很多挫败感和痛苦。TailwindCSS 不是、也永远不会取代 CSS。


感谢大家的阅读,希望你们能从这篇文章中学到一些额外的知识,可以给那些喜欢不做任何研究就争论的人一些建议😄。欢迎大家提出反馈。一如既往,祝大家学习愉快,并确保学习过程中始终充满乐趣。说真的,加点料吧!下次再见👋。

文章来源:https://dev.to/shafspecs/css-3-vs-tailwind-css-25le
PREV
你应该知道的一些 JavaScript 原则。类型、表达式、提升、全局块绑定、For 循环中的块绑定、箭头函数
NEXT
掌握 JavaScript 事件委托