为什么Tailwind CSS能成为最终赢家?

发表时间: 2023-09-12 06:20

家好,很高兴又见面了,我是"高级前端‬进阶‬",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。

什么是Tailwind CSS

Tailwind CSS 是一个实用程序优先的 CSS 框架,旨在使用户能够更快、更轻松地创建应用程序。 开发者可以使用实用程序类来控制布局、颜色、间距、排版、阴影等,以创建完全自定义的组件设计, 无需保留 HTML 或编写一行自定义 CSS。

例如,假设要创建一个具有固定高度、水平填充、黑色背景色、圆角边缘和白色半粗体字体的按钮。 下面是使用 Tailwind CSS 的 HTML:

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">Buy now</button>

HTML 包含六个实用程序类,比如:

  • h-10:此类将按钮设置为 10 个单位的固定高度。
  • px-6:该类将按钮的水平填充设置为 6 个单位。
  • font-semibold:此类将按钮的字体粗细设置为半粗体。
  • rounded-md:此类设置按钮的边框半径,使其具有圆角。
  • bg-black:该类将按钮的背景颜色设置为黑色。
  • text-white:此类将按钮的文本颜色设置为白色。

每一个类的含义也很容易理解,使用 Tailwind CSS 的学习曲线主要包括熟悉其实用程序类。 但一旦熟悉了,开发者就能够快速、一致地创建自定义组件。

为什么 Tailwind CSS 获胜

很多开发者都会产生疑问,为什么使用 Tailwind CSS 而不是其他 CSS 框架? Tailwind CSS 是一个底层框架, 这意味着与 Bootstrap 和 Materialize 等其他 CSS 框架不同,Tailwind CSS 不提供完全样式化的组件,如按钮、下拉菜单和导航栏。 相反,它提供实用程序类,以便开发者可以创建自己的可重用组件。

因此,与其他 CSS 框架相比,它对应用程序的外观提供了更大的灵活性和控制力,从而允许开发者创建一个更加独特的网站。

关于为什么 Tailwind CSS 如此受欢迎,下面几点也可能是一些潜在的原因:

  • 不再有命名问题:比如通常的 “primary-link”或“primary”之间的命名纠结,又或者是遵循 BEM 并采用类似“primary__link”的规则。 Tailwind CSS 允许开发者在 HTML 标签内联样式,其范围仅限于特定标签,不会污染其他类似标签。更加可喜的是,Tailwind CSS还支持 伪类和响应性,从而最大限度保持易用性。
<a class="hover:underline">link</a><h1 class="text-xs sm:text-sm md:text-base lg:text-lg">Title</h1>
  • 无应用上下文切换逻辑:Tailwind CSS 的目标是快速构建现代网站,无需离开 HTML。 出发点是正确的,而且很少有开发人员直接编写 HTML,取而代之的是JSX 或 TSX。 因此,切换到使用 CSS 文件来更改样式是一种代价高昂的上下文切换,通常开发人员只是将 CSS 编写为应用程序中的实用程序类,从而极大简化了复杂 CSS 构建管道。
- bulma.scss- general.scss- blog.scss- tidbit.scss- pagination.scss- banner.scss- footer.scss- header.scss
  • 可简单复制粘贴: Bootstrap 提供了易于上手的模板,成为任何副业或创业公司的事实标准。 但页面设计是不容易轻易复制粘贴的,因为需要同时复制 CSS 和 HTML。 然而,TailwindCSS 这一点非常友好,每个人都使用相同的实用程序类,因此开发者只需将类列表或 HTML 块复制并粘贴到应用程序就可正常工作。
<a class="text-blue hover:text-red">Link</a>
  • 依赖性更少,体积更小: Tailwind CSS 默认情况下是 tree-shaking 的,并且没有自己的 Grid 网格或 Flexbox 设计(默认底层 CSS 概念)。 与 Bootstrap 等上一代套件相比,Bootstrap 实际上在迫使用户采用 JS、HTML、CSS 和 Saas 等 CSS 构建系统。从这一点来看,Tailwind CSS 很容易与其他框架共存。
/** 自定义的 tailwind.config.js 文件*/module.exports = {  content: [    "./app/**/*.{js,ts,jsx,tsx,mdx}",    "./pages/**/*.{js,ts,jsx,tsx,mdx}",    "./components/**/*.{js,ts,jsx,tsx,mdx}",    // Or if using `src` directory:    "./src/**/*.{js,ts,jsx,tsx,mdx}",  ],  theme: {    extend: {},  },  plugins: [],}
  • 可重复使用性: 多年来,开发人员认为 CSS 可重用性是通过 Saas 和 Less 等预处理器向 CSS 添加类层次结构来实现的。 编写最少 CSS 的最佳方法是只编写基本样式(不定义自定义样式)。

参考资料

https://matt-rickard.com/why-tailwind-css-won

https://tailwindcss.com/docs/hover-focus-and-other-states

https://blog.hubspot.com/website/what-is-tailwind-css

https://www.samanthaming.com/blog/building-my-new-site-with-tailwind/

https://dev.to/shafspecs/css-3-vs-tailwind-css-25le

https://www.linkedin.com/pulse/css-framework-showdown-bootstrap-vs-foundation-tailwind-umair-tahir