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

什么是Tailwind CSS

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

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

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还支持伪类和响应性，从而最大限度保持易用性。

link
Title

无应用上下文切换逻辑：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 块复制并粘贴到应用程序就可正常工作。

Link

依赖性更少，体积更小： 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