🎨
Utility-First CSS Framework

Tailwind CSS v4
实战指南

utility-first CSS 框架，从原子类到设计系统——无需离开 HTML 即可构建任意界面

Tailwind v4 CSS-first 配置 JIT 引擎 Vite 插件 React / Vue / Svelte 设计系统
10章节
#1最流行CSS框架
v4全新架构

课程简介

Tailwind CSS 是当今全球下载量最大的 CSS 框架，它颠覆了传统"语义化 CSS"的思维方式，改用工具类优先（utility-first）的方法：在 HTML 中直接组合原子类，无需再取类名、无需反复切换文件。

v4 是 Tailwind 的里程碑版本：放弃 JavaScript 配置文件，改用原生 CSS 的 @theme 指令定义设计 token；全新 Rust/Lightning CSS 构建引擎速度提升 5x；与 Vite、Next.js、Nuxt 等主流框架的官方插件深度集成。

v4 核心新特性

⚗️

CSS-first 配置

用 @theme 指令直接在 CSS 文件中定义颜色、字体、间距，告别 tailwind.config.js

⚡

5x 构建速度

基于 Oxide 引擎（Rust + Lightning CSS），全量构建比 v3 快 5 倍，增量构建更快

📦

零配置安装

一行 @import "tailwindcss" 即可启动，Vite 插件自动检测内容文件

🎯

容器查询

原生支持 CSS 容器查询 @container，组件级响应式设计

🌙

深色模式升级

支持 class/media/selector 三种策略，与 CSS 变量完美配合

🔧

@utility 自定义

用 CSS 原生方式自定义工具类、变体，无需 JS 插件系统

你将学到什么

🧱

原子类体系

spacing、typography、colors、flex、grid 完整工具类系统

📱

响应式设计

sm/md/lg/xl 断点、移动优先策略、arbitrary values

🌙

深色模式

dark: 前缀、class 策略、CSS 变量主题配合

✨

动画过渡

transition、animate-spin/ping/pulse、自定义 keyframes

⚗️

v4 CSS 配置

@theme、@layer、@utility、@variant 指令完整讲解

🚀

框架集成

React、Vue、Next.js 集成，clsx/cn 工具，生产优化

前置要求

✅ 了解 HTML 和基础 CSS（选择器、盒模型、flexbox）

✅ 安装 Node.js（v18+）和 npm/pnpm

✅ 推荐安装 VS Code + Tailwind CSS IntelliSense 扩展

⚪ 有 React 或 Vue 基础更好，但非必须——第1章有纯 HTML 示例

课程目录