Tailwind CSS，凭什么颠覆传统前端框架？

原创已于 2025-05-23 10:54:28 修改 · 3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-03-04 10:38:16 首次发布

原子化CSS框架 - Tailwind CSS

Tailwind CSS 作为一个原子化CSS 框架，自2017年11月1日发布以来，经过了 7 年的持续发展，已经取得了显著的成绩。以下是一些重要的统计数据和成就：

● gitHub start数量 81k

● npm 周下载量 9518K

● gitHub fork 数量 4.1K

这些数据展示了 Tailwind CSS 在开发者社区中的广泛使用和高人气，表明它已经成为许多前端开发项目中不可或缺的工具之一。

1. Tailwind CSS 是什么?

Tailwind CSS 是一个功能类的 CSS 框架，它与传统的组件化框架（如 Bootstrap）不同，它提供了许多用于直接控制样式的原子级别的 CSS 类。开发者可以通过组合这些类来快速构建自定义的用户界面，而不是依赖于预设的组件或样式。

2. Tailwind CSS 的特点和优势

2.1 特点

原子化（Utility-First）

提供大量原子化的工具类，如 bg-blue-500, text-white, p-4 等，允许开发者在 HTML 中直接应用这些类来构建 UI，而无需编写自定义 CSS。

高度可定制化

支持通过配置文件（tailwind.config.js）进行全面定制，能够修改默认的颜色、间距、字体等，满足特定的设计需求。

响应式设计

内置响应式设计支持，允许使用如 sm:, md:, lg: 等断点来快速实现适配不同屏幕的布局。

强大的工具链

结合工具链（如 PurgeCSS）去除未使用的 CSS，生成优化后的样式表，减少最终的文件大小。

开箱即用

提供了一套完整的设计系统，包括颜色、排版、间距等，可以快速上手，减少设计和开发的重复工作。

2.2 优势

提高开发效率

a. 你不会浪费精力发明类名。不再为了能够设置样式而添加像 sidebar-inner-wrapper 这样愚蠢的类名，也不再为真正只是一个 flex 容器的东西的完美抽象名称而苦恼。

b. 你的 CSS 停止增长。使用传统方法，每次添加新功能时，你的 CSS 文件都会变大。使用工具，一切都可以重用，因此你几乎不需要编写新的 CSS。

c. 做出改变感觉更安全。CSS 是全局的，你永远不知道在进行更改时会破坏什么。HTML 中的类是本地的，因此你可以更改它们而不用担心其他东西会破坏。

简洁易用

语法简洁直观，类名直接表达样式功能，降低了学习曲线，开发者可以快速上手。

减少样式冲突

通过原子化的设计，样式更加独立，避免了传统 CSS 中常见的样式覆盖和冲突问题。

易于维护

通过配置和类名标准化，样式逻辑清晰，易于进行项目维护和更新。

灵活性高

支持高度定制，能满足大多数项目的设计需求，同时也适合快速原型开发。

总结：Tailwind CSS 通过简洁、可定制的工具类，使开发者能够高效、快速地构建美观、响应式的 UI，适用于从小型项目到大型复杂应用的各种场景。

3. Tailwind CSS与其他CSS框架的对比

3.1 设计哲学

● Tailwind CSS:

功能类（Utility-First）: Tailwind 是一个功能类框架，即它提供了一组原子级的 CSS 类来直接控制元素的外观。例如，bg-blue-500（背景色），text-lg（字体大小），p-4（内边距）。开发者通过组合这些类来创建自定义的 UI，而不是依赖于预设的组件。
高度可定制: Tailwind 没有强制定义样式，开发者可以自由组合类来创建符合需求的界面。定制化过程简单，且能实现精确控制。

● 其他框架:

组件驱动（Component-Based）: 这些框架通常提供了一系列
预设组件（如按钮、导航栏、卡片等），开发者使用这些现成的组件来构建页面。这些组件是样式和功能的集合，通常会有一定的统一样式和设计风格。有限的定制性: 尽管可以通过修改框架的样式表或主题来进行一定的定制，但大多数框架的组件仍然是固定的，定制的灵活性相对较低。

3.2 定制化

● Tailwind CSS:

完全定制化: Tailwind 的优势在于其可定制性。你可以使用配置文件（tailwind.config.js）来调整框架的默认值（如颜色、字体、间距等），甚至可以创建你自己的功能类。每个类都针对单一功能，所以你不需要改动整个组件，而是可以精细地控制每一个细节。
高度可定制的设计系统: Tailwind 更像是构建设计系统的工具，它不提供现成的 UI 组件，而是提供灵活的工具来搭建任何风格的 UI。

● 其他框架:

有限的定制: 例如，在 Bootstrap 中，你可以通过修改 Sass 变量来调整一些默认样式，但这通常是通过覆盖现有组件的方式来实现的。如果你想改变组件的样式，需要进行更多的覆盖或重新设计组件。
更难以完全定制: 传统的框架更偏向于“开箱即用”的组件，而定制这些组件的细节相对复杂，可能需要覆盖大量的样式或直接修改框架源代码。

3.3 学习曲线

● Tailwind CSS:

初学者挑战: 尽管 Tailwind 的语法简洁，但因为它没有提供现成的组件，所以开发者需要更加深入理解 CSS。尤其是对刚开始接触的开发者来说，理解并使用大量的功能类可能需要一些时间。
灵活性与复杂性平衡: 对于有经验的开发者来说，Tailwind 的灵活性和可组合性是它的一大优势，但对于初学者，直接使用功能类来构建页面可能会显得有些杂乱无章，尤其是类名的组合。

● 其他框架:

易于上手: Bootstrap 和其他传统框架通常更容易上手，因为它们提供了预制的组件和样式。开发者只需要调用这些组件即可，通常不需要理解太多底层的样式。
即插即用: 只需要引入框架的 CSS 和 JavaScript 文件，就可以开始使用这些框架的现成组件，适合快速开发和原型设计。

3.4 文件大小与性能

● Tailwind CSS:

小文件大小: Tailwind 通过其配置文件可以树摇（Purge）掉未使用的 CSS 类，生成一个只包含实际使用样式的 CSS 文件，最终的文件大小可能比传统框架要小得多。这对于性能优化非常有帮助。
按需加载: Tailwind 在生产环境下通过 Purge 功能来剔除未使用的类，因此可以大幅减少 CSS 文件的大小。

● 其他框架:

较大的文件大小: Bootstrap、Foundation 等框架通常包含了大量的 CSS 和 JavaScript 代码，这些代码包含了大量不必要的样式和组件，可能导致文件较大，影响性能。
无法剔除不必要的样式: 传统框架没有像 Tailwind 那样的按需加载机制，通常需要开发者手动优化文件大小。

3.5 开发速度

● Tailwind CSS:

快速构建原型: 由于它的功能类设计，开发者可以快速通过组合类名来构建页面，不需要编写多余的 CSS 代码。虽然没有现成的组件，但你可以通过组合类来快速调整样式，实现快速迭代。
代码复用: 使用 Tailwind 可以有效减少重复的 CSS 代码，因为样式的组合可以通过类名的重用来实现。

● 其他框架:

更快的原型开发: 由于它们提供了现成的组件和布局，开发者可以快速搭建页面和应用程序。适合需要快速展示功能和界面的项目。
减少自定义工作: 在使用像 Bootstrap、Bulma 等框架时，开发者不需要从零开始构建每个 UI 元素，可以快速使用现成的组件加速开发。

3.6 适用场景

● Tailwind CSS:

适合定制化高、设计独特的项目，或者需要一个灵活的设计系统的开发团队。
特别适合有前端开发经验的团队或个人，因为它提供了更精细的控制和更多的灵活性。

● 其他框架:

适合快速开发和原型设计，或者需要统一 UI 风格的项目。适合需要快速交付的团队，尤其是初学者或者时间有限的开发者。

总结

● Tailwind CSS

是一个功能类框架，强调灵活性和可定制性，适合需要高度定制的项目，但需要更多的 CSS 理解和组合能力。

● 传统框架

（如 Bootstrap 和 Bulma）则是组件驱动的框架，提供了大量的现成组件，适合快速开发和原型设计，尤其适合初学者和时间紧迫的项目。

4. Tailwind CSS与传统CSS类实现相同功能的对比

通过对比两者实现相同的功能：创建一个带有背景颜色、圆角和阴影的按钮。

4.1 使用传统 CSS 类（自定义 CSS）

HTML 代码（使用自定义 CSS）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Custom CSS Button</title>
</head>
<body class="bg-gray-200 p-5">

  <button class="btn-primary">
    Click Me
  </button>

</body>
</html>

styles.css 文件：

/* styles.css */

/* Button styles */
.btn-primary {
  background-color: #3b82f6; /* bg-blue-500 */
  color: white; /* text-white */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
  background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.btn-primary:focus {
  outline: none; /* focus:outline-none */
  ring: 2px solid rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-400 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-opacity-50 */
}

4.2 使用 Tailwind CSS 后：

HTML 使用 Tailwind CSS 后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind Button</title>
</head>
<body class="bg-gray-200 p-5">

  <button class="bg-blue-500 
text-white 
py-2 
px-4 
rounded-lg 
shadow-lg 
hover:bg-blue-700 
focus:outline-none 
focus:ring-2
focus:ring-blue-400
focus:ring-opacity-50">
    Click Me
  </button>

</body>
</html>

4.3 对比分析：

● 你直接在 HTML 元素中使用了 Tailwind 提供的功能类，如 bg-blue-500、text-white、py-2、rounded-lg、shadow-lg 等，来控制元素的样式。

● 不需要编写额外的 CSS 文件，只需通过类名来设置样式，代码更加紧凑且易于理解。

你可以通过类名的组合，快速修改样式和调整布局，灵活性很高。

5. React 中安装TailwindCss

安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
使用Tailwind CSS CLI创建配置文件：

npx tailwindcss init -p
在tailwind.config.js中配置Tailwind CSS（如果已经创建，则可以直接编辑）：

// tailwind.config.js
module.exports = {
purge: [‘./src/**/*.{js,jsx,ts,tsx}’],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
在postcss.config.js中配置PostCSS（如果不存在，则创建）：

// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
在React项目的入口文件（通常是index.js或App.js）中引入Tailwind CSS样式：

import ‘./index.css’;

// …

export default function App() {
return (

Hello, world!

);
}
在index.css中引入Tailwind CSS（如果是全新的CSS文件，则创建它）：

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
最后，运行启动项目

npm run dev

6. Tailwind 常用样式

6.1 网格系统（grid）

Tailwind CSS的网格系统提供了强大的布局工具，允许你创建复杂的响应式网格布局。使用grid-cols-、grid-rows-和gap-类可以轻松定义列数、行数和网格项之间的间距。

<!-- 示例代码 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 h-32">1</div>
  <div class="bg-blue-500 h-32">2</div>
  <div class="bg-blue-500 h-32">3</div>
  <div class="bg-blue-500 h-32">4</div>
  <div class="bg-blue-500 h-32">5</div>
  <div class="bg-blue-500 h-32">6</div>
</div>

在上面的代码中，.grid-cols-3定义了网格有3列，.gap-4设置了网格项之间的间距为4。你可以通过添加或修改类来调整列数、行数和间距，以适应不同的设计需求。

6.2 文本颜色类（text-colors）

在Tailwind CSS中，文本颜色类用于改变元素内的文本颜色。这些类遵循一个简单的命名模式，使你能够快速地应用预定义的颜色。下面是一些示例：

<!-- 黑色文本 -->
<p class="text-black">这是黑色文本。</p>
<!-- 红色文本 -->
<p class="text-red-500">这是红色文本。</p>
<!-- 灰色文本 -->
<p class="text-gray-300">这是浅灰色文本。</p>
<!-- 透明度为50%的黑色文本 -->
<p class="text-black opacity-50">这是半透明的黑色文本。</p>

说明

● text-black：将文本颜色设置为黑色。

● text-red-500：将文本颜色设置为红色调色板中的500色调。

● text-gray-300：将文本颜色设置为灰色调色板中的300色调，这是一种较浅的灰色。

● opacity-50：将元素的透明度设置为50%，可以与任何颜色类结合使用，以创建半透明效果。

6.3 背景颜色类（bg-colors）

背景颜色类用于改变元素的背景颜色。与文本颜色类相似，背景颜色类也遵循一个命名模式，便于快速应用颜色。

<!-- 黑色背景 -->
<div class="bg-black">这是黑色背景的div。</div>
<!-- 蓝色背景 -->
<div class="bg-blue-500">这是蓝色背景的div。</div>
<!-- 灰色背景 -->
<div class="bg-gray-200">这是浅灰色背景的div。</div>
<!-- 半透明的蓝色背景 -->
<div class="bg-blue-500 opacity-50">这是半透明的蓝色背景div。</div>

说明

● bg-black：将背景颜色设置为黑色。

● bg-blue-500：将背景颜色设置为蓝色调色板中的500色调。

● bg-gray-200：将背景颜色设置为灰色调色板中的200色调，这是一种非常浅的灰色。

● opacity-50：将元素的透明度设置为50%，与背景颜色类结合使用，可以创建半透明背景效果。

6.4 字体大小类（font-sizes）

在Tailwind CSS中，字体大小类允许你轻松地调整文本的大小，而无需编写自定义CSS。这些类基于一个预定义的配置，可以覆盖或扩展以适应你的设计需求。下面是一些常用的字体大小实用类：

- .text-xs    // 小号字体，通常为12px
- .text-sm    // 较小字体，通常为14px
- .text-base  // 基础字体大小，通常为16px
- .text-lg    // 较大字体，通常为20px
- .text-xl    // 大号字体，通常为24px
- .text-2xl   // 更大的字体，通常为32px
- .text-3xl   // 还更大的字体，通常为40px
- .text-4xl   // 最大字体，通常为48px

7. 自定义与扩展

7.1 自定义

在使用Tailwind CSS时，你可能会发现默认的实用类无法完全满足你的设计需求。Tailwind CSS允许你通过配置文件来创建自定义的实用类，这极大地增强了框架的灵活性。下面是如何在Tailwind CSS中创建自定义实用类的步骤：

配置文件

首先，你需要在项目中找到或创建tailwind.config.js文件。这个文件是Tailwind CSS的配置入口，你可以在这里定义自定义的实用类。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 自定义实用类配置
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      colors: {
        'custom-blue': '#1e90ff',
      },
      // 更多自定义配置...
    },
  },
  variants: {},
  plugins: [],
}

7.2 扩展

Tailwind CSS的默认配置已经非常强大，但你仍然可以对其进行扩展，以适应更具体的设计需求。扩展配置通常涉及修改tailwind.config.js文件中的extend属性。

扩展字体大小

例如，你可能需要添加一些额外的字体大小选项。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'xl': ['1.5rem', { lineHeight: '2rem' }],
      },
    },
  },
  variants: {},
  plugins: [],
}