Tailwind CSS 专题：从原子化样式到企业级 Design System on PlumePHP

附录 C：Tailwind CSS 速查表（Cheat Sheet）

Sun, 16 Nov 2025 00:11:31 +0800

布局 Layout
Flexbox
Grid
尺寸 Sizing
间距 Spacing
排版 Typography
颜色 Colors
背景 Background
边框 Border
圆角 Radius
阴影 Shadow
透明度 Opacity
变换 Transform
动画 Animation
过渡 Transition
交互 Interactivity
Position 定位
Overflow
列表 / 表格
滚动 Scroll / Snap
状态选择器 Variants
响应式前缀 Responsive Prefix
Arbitrary（任意值）
常用组件模式（Button、Input、Card）速查

1. 布局 Layout

Display

block | inline-block | inline | flex | inline-flex | grid | inline-grid | hidden | table

Contain（新版）

contain | contain-strict | contain-size | contain-content

Box sizing

box-border | box-content

Float / Clear

float-right | float-left | float-none
clear-both | clear-none

2. Flexbox

容器

flex | inline-flex
flex-row | flex-row-reverse
flex-col | flex-col-reverse
flex-wrap | flex-nowrap | flex-wrap-reverse

对齐

justify-start | center | end | between | around | evenly
items-start | center | end | stretch
content-start | center | between | around

Flex 子项

flex-1 | flex-auto | flex-initial | flex-none
flex-grow | flex-grow-0
flex-shrink | flex-shrink-0
order-1 | order-last | order-none

3. Grid

列定义

grid-cols-1 … 12
grid-cols-none
grid-cols-[200px_1fr]

行定义

grid-rows-1 … 12

自动布局

auto-cols-auto | auto-cols-fr
auto-rows-auto | auto-rows-fr

间距

gap-1 … gap-96
gap-x-4 | gap-y-4

Span

col-span-2 | col-span-full
row-span-3

4. 尺寸 Sizing

Width

w-0 | w-px | w-1 … w-96
w-full | w-screen | w-auto
w-fit | w-min | w-max
w-[120px]

Height

h-0 | h-px | h-1 … h-96
h-full | h-screen | h-auto
h-fit
h-[60vh]

Min/Max

min-w-0 | min-w-full | max-w-screen-xl
min-h-screen | max-h-96

5. 间距 Spacing

统一 scale：0 | 0.5 | 1 | 1.5 | 2 | 2.5 … 96

附录 B：Tailwind + shadcn/ui 最佳实践组件示例

Sun, 16 Nov 2025 00:10:31 +0800

B.0 基础工具：`cn` 函数（必须有）

cn 是 shadcn/ui 的经典组合：clsx + tailwind-merge。
在所有组件里用于合并类名并解决冲突。

// src/lib/cn.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
 return twMerge(clsx(inputs))
}

后面所有组件都默认从这里引用 cn。

附录 A：Tailwind 全类名一览表

Sun, 16 Nov 2025 00:09:31 +0800

本附录将 Tailwind 所有常用原子类分为 15 大类，覆盖全部能力：

A.1 布局（Layout）

包含：

常规布局(display)
定位(position)
Flex
Grid
多列布局
隐藏控制

A.1.1 Display

block
inline-block
inline
flex
inline-flex
table
inline-table
table-row
table-cell
grid
inline-grid
contents
hidden

A.1.2 Position

static
fixed
absolute
relative
sticky

辅助类：

inset-0
top-0
right-0
bottom-0
left-0

inset-x-0
inset-y-0

支持 arbitrary：（非常常用）

第 12 章：Tailwind 与主流 UI 框架全面对比

Sun, 16 Nov 2025 00:08:31 +0800

这一章是整本书的“最终章”，也可以视为企业 UI 技术选型指南，价值极高。
本章会深入对比：

Tailwind
Bootstrap
Material UI (MUI)
Ant Design
Chakra UI
Radix UI
Headless UI
Shadcn/UI
Flowbite
DaisyUI
Tremor / Admin UI 类库

并从工程化、性能、主题化、组件覆盖、生态、学习成本、团队规模适配等维度给出最终选择策略。

第 11 章：Tailwind 与原子化 CSS 的未来趋势（StyleX / UnoCSS / WindiCSS 深度对比）

Sun, 16 Nov 2025 00:07:31 +0800

这一章是最具战略视野的一章，极其重要：

企业如何选择下一代 CSS 技术？
Tailwind 是否会被 UnoCSS 取代？
Meta 的 StyleX 是否会成为未来标准？
原子化 + 编译器模式会走向何方？
未来的 CSS 工具链演变趋势是什么？

11.1 当今 CSS 技术的三大路线

现代 CSS 技术的演进已经进入“编译器时代”，目前分为三大核心路线：

第 10 章：Tailwind 在企业级 Design System 的落地方案

Sun, 16 Nov 2025 00:06:31 +0800

本章核心目标：

统一的 Design Token 体系
多品牌、多主题、多租户的 UI 系统
Tailwind 驱动的 UI 组件库
设计—开发完美协作机制
Storybook / Tokens Studio / Figma 链路
企业级设计系统治理模式

Tailwind 在设计系统中的位置：

第 9 章：Tailwind 与最佳实践 UI 组件体系

Sun, 16 Nov 2025 00:05:31 +0800

这一章是全书最实战、最接地气、工程价值最高的章节之一，主要内容包括：

企业级 UI 组件设计原则
使用 Tailwind 构建 30+ 高质量 UI 组件
base / variants / states 核心架构
组件主题化、暗黑模式、响应式
与插件系统结合
与 shadcn/ui 的方法论对比
组件库组织方式（React / Vue 两套示例）
企业级 UI 组件库的目录与发布模式

9.1 组件体系的设计哲学（从 Tailwind 转向 Design System）

Tailwind 的组件设计必须遵守三大准则：

第 8 章：Tailwind 生态系统深度解析

Sun, 16 Nov 2025 00:04:31 +0800

本章将覆盖：

官方生态（Typography / Forms / Aspect-Ratio / Line-Clamp / Container Queries 等）
Tailwind 的周边工具链（Headless UI、Heroicons）
第三方生态系统（DaisyUI、Flowbite、shadcn/ui、Tremor、Preline）
Tailwind 与 WindiCSS / UnoCSS 对比
生态的工程价值、团队协作价值
如何为企业打造自己的 Tailwind 生态体系
源码级别的插件机制解析

Tailwind 的生态系统比框架本身更强大。
生态让 Tailwind 从一个“CSS 工具集”变成一个“完整前端 UI 体系”。

第 7 章：Tailwind 插件系统（Plugin API 深度解析）

Sun, 16 Nov 2025 00:03:31 +0800

本章是 Tailwind 工程化体系的核心章节之一，难度高、内容巨大，面向：

企业级前端工程师
UI 架构师
Design System 负责人
Tailwind 高级用户
多主题 / 多租户系统研发者

Tailwind 的插件系统，是让它不仅仅是 CSS 框架，而是企业级 UI 编译引擎的核心原因。

第 6 章：Tailwind 的高级工程化体系（企业级）

Sun, 16 Nov 2025 00:02:31 +0800

本章是企业级大型项目（SaaS、多租户、多品牌、复杂组件库）必须具备的完整工程体系，涵盖：

Tailwind 架构体系
多主题系统
CSS 变量深度集成
按需加载、打包优化
组件库专用规范
多项目、多品牌、多租户的架构模式
CI/CD、版本管理、设计系统协作流程
工程化组织结构最佳实践

6.1 为什么企业需要 Tailwind 工程化体系

在小型项目中，你只需：

第 5 章：Tailwind 在现代前端框架中的实践（React / Vue / Next.js / Nuxt / Svelte / Solid）

Sun, 16 Nov 2025 00:01:31 +0800

本章目标：

从工程架构视角解释 Tailwind 如何融入现代前端框架
提供 React/Vue/Svelte/Solid 的最佳实践模式
解释组件化与原子化之间的关系
给出企业级工程组织方式（文件组织、UI 组件库、Design System）
深入 Next.js 15 / Nuxt 3 的 SSR & RSC 与 Tailwind 配置
解决最常见的工程踩坑（深色模式、控件状态、动态类名等）

5.1 为什么 Tailwind 与现代前端框架是“天作之合”

Tailwind 能在短时间内成为全球前端团队的首选，其核心原因是：

Tailwind CSS 详解

Sun, 16 Nov 2025 00:00:31 +0800

—— 从设计哲学、底层原理到企业级工程化的完整指南

适用人群：前端工程师、UI 工程师、全栈开发者、Web 工程架构师、设计系统负责人、SaaS/独立开发者
适用场景：企业级开发、SaaS 产品 UI、Design System、Web App、管理后台、营销页、H5、小程序（UnoCSS）等