跳到主要内容

Tailwind CSS 简介

Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了一套高度可定制的原子化工具类，让你能够直接在 HTML 中构建现代化的用户界面。2025 年 1 月发布的 Tailwind CSS v4.0 更是带来了革命性的性能提升和全新的开发体验。

什么是 Tailwind CSS？​

Tailwind CSS 与传统的 CSS 框架（如 Bootstrap、Bulma）有本质区别。传统框架提供预设计好的组件（如按钮、卡片、导航栏），而 Tailwind CSS 只提供底层的原子化工具类，让你可以自由组合创建完全自定义的设计。

核心特点​

特点说明
原子化每个类只做一件事，如 text-center 只设置文字居中
功能类优先直接在 HTML 中使用工具类，无需编写自定义 CSS
高度可定制可以自定义颜色、间距、字体等所有设计令牌
响应式内置移动优先的响应式断点系统
无运行时构建时生成 CSS，生产环境零运行时开销
按需生成只生成实际使用的 CSS，文件体积小

Tailwind CSS v4.0 的重大改进​

2025 年 1 月， Tailwind CSS v4.0 正式发布，这是一个从头重写的版本，带来了显著的性能提升和全新的开发体验：

性能提升：

操作v3.4v4.0提升
完整构建378ms100ms3.78x
增量构建（新 CSS）44ms5ms8.8x
增量构建（无新 CSS）35ms192µs182x

增量构建在没有新 CSS 时甚至可以在微秒级完成，这意味着你在开发过程中大多数时候几乎感觉不到延迟。

浏览器兼容性：

Tailwind CSS v4.0 需要 Safari 16.4+、Chrome 111+、Firefox 128+。如果需要支持旧浏览器，建议继续使用 v3.4。

v4.0 核心新特性：

  • 全新高性能引擎：使用 Rust 重写，构建速度提升数倍
  • CSS-first 配置：不再需要 tailwind.config.js，直接在 CSS 中配置主题
  • 自动内容检测：无需配置 content 路径，自动扫描模板文件
  • 现代 CSS 特性：基于级联层、@property、color-mix() 等现代特性构建
  • 容器查询：内置支持，无需插件
  • OKLCH 颜色：全新的颜色系统，更鲜艳生动

与传统 CSS 的对比​

传统 CSS 写法：

<style>
  .card {
    background-color: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .card-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  .card-text {
    color: #666;
    margin-top: 8px;
  }
</style>

<div class="card">
  <h2 class="card-title">标题</h2>
  <p class="card-text">内容描述</p>
</div>

Tailwind CSS 写法：

<div class="bg-white rounded-lg p-6 shadow-md">
  <h2 class="text-2xl font-bold text-gray-800">标题</h2>
  <p class="text-gray-600 mt-2">内容描述</p>
</div>

Tailwind 的方式让你无需在 HTML 和 CSS 文件之间来回切换，所有样式都直接写在元素上，开发效率更高。

为什么选择 Tailwind CSS？​

开发效率高​

使用 Tailwind CSS，你不需要花时间思考类名。传统开发中，给元素命名是一个常见的痛点，而 Tailwind 直接使用描述性的工具类，所见即所得。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按钮
</button>

维护更简单​

在传统 CSS 项目中，修改样式可能影响多个页面，很难确定哪些样式可以安全删除。Tailwind 的工具类只作用于当前元素，修改或删除都不会产生副作用。

CSS 文件不会无限增长​

传统 CSS 项目中，每添加一个新功能，CSS 文件就会变大。而 Tailwind 的工具类是可复用的，无论项目多大，CSS 文件大小都相对稳定。

响应式开发更轻松​

Tailwind 内置响应式断点，无需编写媒体查询：

<div class="w-full md:w-1/2 lg:w-1/3">
  在不同屏幕尺寸下自动调整宽度
</div>

暗黑模式支持​

内置暗黑模式支持，只需添加 dark: 前缀：

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  自动适配暗黑模式
</div>

性能优异​

Tailwind CSS v4.0 的高性能引擎确保：

  • 开发时增量构建在微秒级完成
  • 生产时只包含实际使用的 CSS
  • 与 Vite 等现代构建工具深度集成

与内联样式的区别​

很多人会问：这不就是内联样式吗？实际上有本质区别：

特性内联样式Tailwind CSS
命名约束无，任意值基于设计系统
响应式不支持完整支持
悬停等状态不支持完整支持
可维护性差好

内联样式的问题：

<div style="background-color: #3b82f6; padding: 16px; border-radius: 8px;">
  内联样式无法使用悬停效果和响应式
</div>

Tailwind 的解决方案：

<div class="bg-blue-500 p-4 rounded-lg hover:bg-blue-600 md:p-6">
  支持悬停效果和响应式设计
</div>

工作原理​

Tailwind CSS 的工作流程如下：

  1. 扫描源文件：扫描所有 HTML、JS、TS 等文件，提取类名
  2. 生成 CSS：根据扫描到的类名生成对应的 CSS 规则
  3. 优化输出：移除未使用的样式，压缩 CSS 文件

这意味着最终生成的 CSS 文件只包含你实际使用的样式，而不是整个框架。

v4.0 的新工作方式​

Tailwind CSS v4.0 引入了更现代的工作方式：

CSS-first 配置：

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;
  --color-brand-500: oklch(0.7 0.15 165);
  --breakpoint-3xl: 1920px;
}

不再需要 JavaScript 配置文件，所有定制都在 CSS 中完成。

CSS 变量暴露：

所有设计令牌自动作为 CSS 变量暴露，可以在任何地方使用：

.custom-element {
  font-family: var(--font-display);
  background-color: var(--color-brand-500);
}

响应式断点系统​

Tailwind 采用移动优先的断点系统，每个断点表示"从这里开始"：

断点前缀最小宽度CSS
sm40rem (640px)@media (width >= 40rem)
md48rem (768px)@media (width >= 48rem)
lg64rem (1024px)@media (width >= 64rem)
xl80rem (1280px)@media (width >= 80rem)
2xl96rem (1536px)@media (width >= 96rem)

移动优先的理解：

<!-- 错误：sm 不是"小屏幕"，而是"sm 断点及以上" -->
<div class="sm:text-center">
  这不会在小于 640px 的屏幕上生效！
</div>

<!-- 正确：用无前缀类设置移动端样式，再用断点覆盖 -->
<div class="text-center sm:text-left">
  移动端居中，sm 及以上左对齐
</div>

容器查询（v4.0 新特性）​

Tailwind CSS v4.0 内置支持容器查询，让组件可以根据父容器大小而非视口大小响应：

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- 小容器时纵向排列，中等容器时横向排列 -->
  </div>
</div>

这让你可以构建真正可复用的组件，它们在任何上下文中都能正确显示。

状态变体​

Tailwind 使用前缀来处理各种状态：

<!-- 悬停状态 -->
<button class="bg-blue-500 hover:bg-blue-700">

<!-- 焦点状态 -->
<input class="border-gray-300 focus:border-blue-500">

<!-- 暗黑模式 -->
<div class="bg-white dark:bg-gray-800">

<!-- 组合使用 -->
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 dark:bg-blue-800">

<!-- 响应式 + 状态 -->
<div class="text-gray-600 md:hover:text-gray-900">

适用场景​

Tailwind CSS 特别适合以下场景：

  • 快速原型开发：无需搭建复杂的 CSS 架构
  • 组件库开发：构建可复用的 UI 组件
  • 团队协作：统一的设计系统减少沟通成本
  • 响应式网站：轻松实现多端适配
  • 与前端框架配合：React、Vue、Next.js 等框架的最佳搭档

不太适合的场景​

  • 需要高度定制设计的项目：如果你的设计非常独特，可能需要大量自定义 CSS
  • 传统团队：如果团队习惯传统 CSS 开发方式，学习曲线可能较陡

与其他框架对比​

Tailwind vs Bootstrap​

特性TailwindBootstrap
设计风格无预设，完全自定义有明确的视觉风格
组件无预设计组件提供大量现成组件
学习曲线较陡（需要记住类名）较平（直接使用组件）
定制性极高需覆盖默认样式
文件大小按需生成，通常更小包含所有组件，较大

选择建议：

  • 需要快速搭建且有现成组件需求 → Bootstrap
  • 需要完全自定义设计 → Tailwind

Tailwind vs CSS-in-JS​

特性TailwindCSS-in-JS (styled-components 等)
语法类名JavaScript 对象
开发体验简单直接强大但复杂
性能构建时优化运行时开销
调试浏览器原生工具需要特殊工具

学习路径​

本教程将带你从零开始学习 Tailwind CSS：

  1. 安装配置：了解如何在项目中集成 Tailwind CSS
  2. 核心理念：理解功能类优先的设计思想
  3. 布局系统：掌握 Flexbox 和 Grid 布局
  4. 排版样式：学习文字和字体相关工具类
  5. 颜色系统：了解颜色工具类和自定义颜色
  6. 间距控制：掌握内外边距的使用
  7. 响应式设计：学习断点和移动优先开发
  8. 状态样式：悬停、焦点、暗黑模式等状态
  9. 自定义配置：扩展和定制 Tailwind

版本选择建议​

场景推荐版本原因
新项目v4.0最新特性，最佳性能
现有项目升级v4.0自动升级工具，迁移简单
需要稳定v3.4成熟稳定，大量资源
学习 Tailwindv4.0学习最新最佳实践

参考资源​

小结​

本章介绍了 Tailwind CSS 的核心概念和优势：

  • Tailwind CSS 是原子化、功能类优先的 CSS 框架
  • v4.0 带来了革命性的性能提升和全新的 CSS-first 配置体验
  • 与传统框架不同，它提供工具类而非预设计组件
  • 开发效率高、维护简单、CSS 文件体积可控
  • 支持响应式设计、状态样式、容器查询和暗黑模式
  • 与内联样式有本质区别，更适合实际项目开发

下一章，我们将学习如何在项目中安装和配置 Tailwind CSS。