Tailwind CSS 学习笔记

引言

为什么要学

当下这个 AI 时代，大部分的 AI 程序都是基于 Tailwind CSS 进行开发构建的。而且这个东西可以帮助我们提升开发效率，减少做轮子的流程。

常见问题

【初中级】有了解过哪些样式实现方案？为什么 AI 产品都选择 Tailwind CSS 作为样式方案？

【中高级】说说 Tailwind CSS 工程初始化、内核、工具类体系完整内容，详细说明在业务、组件库等场景的应用。

【专家级】站在前端架构师的角度，详细说说 Tailwind CSS 的框架的优势和原理，如何从零到一构建 Tailwind 及相关组件库生态。

为何推荐 Tailwind CSS

主流样式体系方案

手写原生 CSS & CSS 预处理器

这是最直接的方式，开发者直接手动编写 css 文件，通过 link 标签进行引入使用。

痛点：随着项目变大，很快就会面临命名冲突、代码冗余、难以维护等问题，即 CSS 全局命名空间污染。

解决方案：

  • CSS 预处理器（Sass/Less）：引入了变量、嵌套、混入（Mixin）、继承等编程概念，增强了 CSS 的组织性和可复用性，但并未从根本上解决命名空间和全局污染的问题。
  • CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modifier）来约束作用域，增强代码的可读性和可维护性。无论如何，这依赖于开发者的自觉性，并且类型会很长。

CSS-in-JS

在组件化代码的兴起后，把样式作为组件的一部分也成为了一种趋势。

其实就是 CSS 模块化，直接引入一个 css 文件，然后直接使用这个 css 模块即可。这个时候会生成一个哈希值，进而解决 CSS 污染的问题。

无论如何，仍然存在问题：

  • 运行时存在一定的性能损耗。
  • 在 JS 和 CSS 之间来回切换，存在心智负担。

原子化 CSS

这是和语义化 CSS 完全不同的思路，它提供了一系列高度可组合的，功能单一的原子类（Atomic CSS/Utility Classes）。

核心思想就是：不再为组件编写专门的 CSS 类，直接在 HTML 中组合这些原子 CSS 类来构建样式。

其实就是把行内 CSS 转换为一堆的类名，进而简化 CSS 的开发成本。只要在开发这个东西的时候，规定一个类名，就可以保证一致性，提升整体的一个维护性。

优势：

  • 无需思考命名，根本上消除了命名的问题
  • 无需切换文件，样式和结构在一起，不会有心智负担
  • 极致的性能，通过 PurgeCSS 等工具，在构建的时候就生成了 CSS，体积只有几 KB
  • 约束与一致性，一切都是规范的了

为什么 AI 时代 Tailwind CSS 更受欢迎

首先，如果之前，React 里用的是 CSS in JS，但是 Vue 用的又是另外一个。如果我想要直接写两套组件，那么分开了就会导致迁移问题。这个时候，我们使用 Tailwind CSS 就可以直接快速的结合这两个框架。

另外，AI 的大部分场景用的都是 Tailwind CSS，这样就不需要担心样式类名的冲突之类的问题了。

基础使用

工程初始化

直接从一个最最最纯净的项目开始：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
> pnpm create vite
│
◇  Project name:
│  tailwind-study
│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  JavaScript
│
◇  Scaffolding project in D:\Documents\WorkSpace\study-projects\tailwind-study...
│
└  Done.

安装基本的依赖以后，可以直接启动一个基础的项目。

我们需要安装一下 Tailwind 才可以使用，这里直接安装需要的版本即可（最新版可能存在兼容问题，但是当前为学习状态，可以直接使用最新版）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "tailwind-study",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "tailwindcss": "4.1.8"
  },
  "devDependencies": {
    "vite": "^7.1.2",
    "@tailwindcss/vite": "4.1.8"
  }
}

加上这两个依赖就行，直接安装一下，这样就完成了基本的安装步骤。

随后，直接在项目的样式主入口引入 tailwind 的 css：

1
@import 'tailwindcss';

另外使用的是 Vite，所以需要配置一下插件，帮助 Vite 把类名转换为对应的样式：

1
2
3
4
5
6
7
8
9
import {defineConfig} from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [tailwindcss()],
    server: {
        port: 8080
    }
})

至此以及安装好了，可以直接进行使用，例如下面这段代码，不需要写额外的 css，直接写类名即可实现前端的效果了：

1
<div class="bg-blue-500 text-white">这是一个Box部分</div>

|246x134

这个时候，前端的效果已经出现了，这里的类名都可以在官网查看到，如果需要直接查询，或者熟能生巧即可。

常用插件

如果使用 VS Code 的话，可以安装一个插件，以得到下面这种直接就有代码提示的效果：

直接在插件商城搜索 Tailwind CSS 就可以下载了，这个插件是官方维护的插件。

进阶使用

状态

如果需要添加 hover 效果，可以直接在类名里面写 hover:xxx，直接实现 hover 的效果，比如下面这样，鼠标移上去后，背景就会变为琥珀色：

1
<div class="bg-blue-500 hover:bg-amber-500">这是一个Box部分</div>

颜色色值

上面我们使用颜色，都是通过 color-number 的形式写的，这个 number 就是一个颜色的色值，可以看看官网的说法：

如果我们需要定义颜色，则也需要按照这个规范来走，标准用法就是：bg-red-500, text-emerald-400。

如果需要自定义一些颜色，这里面没有的话，则建议直接在主 css 文件内，使用 :root 进行声明，例如：

1
2
3
4
5
@import "tailwindcss";

:root {
    --color-primary: #0070f3;
}

添加自定义样式

虽然 Tailwind 鼓励使用工具类，但是有的时候也需要封装或者自定义。

@apply

可以用来组合一些现有的类型，这样需要的时候只需要使用一个类名即可。

1
2
3
4
/* 使用apple组合样式 */
.primary-button {
    @apply bg-blue-400 text-white rounded-2xl hover:bg-blue-200
}

@utility 和 @theme

可以使用这两个东西，实现工具类的封装。

首先，使用 @utility 声明一个带 * 的类名：

1
2
3
4
5
6
7
8
@theme {
    --color-primary-blue: #0070f3;
}

/* 定义工具类名 */
@utility test-btn-* {
    background-color: --value(--color-primary-*);
}

这里的 * 就是对应的内容，现在在前端就可以直接使用这个类名了，并且带有代码提示：