文章目录
-
- [1. Tailwind CSS 简介](#1. Tailwind CSS 简介)
- [2. v4.3.3 版本亮点](#2. v4.3.3 版本亮点)
- [3. 获取安装包](#3. 获取安装包)
- [4. 快速开始](#4. 快速开始)
1. Tailwind CSS 简介
Tailwind CSS 是由 Adam Wathan 于 2017 年创建的实用优先（utility-first）CSS 框架，目前在 GitHub 上拥有超过 91,800 颗星标，是全球最受欢迎的 CSS 框架之一。与 Bootstrap 等提供预设组件样式（如 .btn、.card）的传统框架不同，Tailwind CSS 提供的是原子化的工具类（如 flex、pt-4、text-center、bg-blue-500），开发者直接在 HTML 中组合这些类即可快速构建自定义界面，无需编写传统 CSS。
Tailwind CSS v4.0 于 2025 年 1 月正式发布，是一次从零开始的重写。其核心引擎"Oxide"采用 Rust 编写，使完整构建速度提升 3.5 至 5 倍，增量构建速度提升高达 100 倍。v4 还引入了 CSS 优先的配置方式------通过 @theme 指令直接在 CSS 中定义设计令牌，不再需要 tailwind.config.js 配置文件。
核心特色包括：
- 实用优先（Utility-First）：提供数百个单一职责的 CSS 工具类，按需组合，无需命名类、无需在 CSS 和 HTML 之间来回切换。
- Oxide 引擎（Rust 驱动）：JIT（即时编译）模式扫描源文件，仅生成实际使用的 CSS，生产环境包体积极小。
- CSS 优先配置 ：使用
@theme指令在 CSS 中定义颜色、字体、间距、断点等设计令牌，所有值自动暴露为 CSS 自定义属性。 - 原生级联层 ：采用
@layer theme, base, components, utilities原生 CSS 级联层，工具类具有最高优先级。 - OKLCH 色彩空间：默认使用感知均匀的 OKLCH 色彩空间，支持 P3 广色域，色彩更鲜艳精准。
- 容器查询内置支持 ：无需插件即可使用
@container、@sm:、@md:等容器查询。 - 3D 变换 ：内置
rotate-x-*、rotate-y-*、scale-z-*、translate-z-*、perspective-*等 3D 工具类。 - 动态工具类值 ：
grid-cols-15、mt-17、w-29等任意值直接可用，无需方括号语法或配置扩展。
2. v4.3.3 版本亮点
该版本汇集了 5 位贡献者 的 15 条 贡献。
v4.3.3 是一个问题修复（bug fix）版本，主要修复如下：
CLI 与构建工具：
- 支持
--watch --poll[=ms]轮询模式，用于文件系统事件不可靠的场景（如 Docker、网络挂载卷）。 - 仅在
--watch模式下按需加载@parcel/watcher，一次性构建和--watch --poll不再依赖该原生模块。 - 确保 Sass 等预处理器修改输入 CSS 后
@tailwindcss/postcss能正确重新构建。 - 防止
@tailwindcss/vite在文件扫描阶段触发不必要的整页重载。 - 防止
@tailwindcss/upgrade从子目录运行时错误地重写被忽略的文件。
CSS 处理与选择器：
- 十六进制颜色与主题颜色匹配时忽略大小写（
bg-[#fff]和bg-[#FFF]均正确匹配）。 - 规范解析
[data-foo]div类选择器为两个独立选择器。 - 即使在未使用 Lightning CSS 的环境中（如
@tailwindcss/browser）也能正确处理 CSS 嵌套。 --spacing(0)优化为0px而非0，确保在calc()中保持长度类型。
样式修正：
- 使用显式平台字体替代
system-ui和ui-sans-serif，确保 Windows 上 CJK 文本正确响应lang属性。 - 防止 Firefox 的
iframe:focus-visible原生轮廓样式被 Preflight 覆盖。 - 防止无色相主题颜色在
oklch等极坐标色彩空间中混合时发生色相偏移。
主题与配置：
- 当
--color-foo和--color-foo-bar同时存在时，JS 插件中theme('colors.foo')能正确解析。 - 小数不透明度修饰符与命名阴影尺寸正确配合（如
shadow-sm/12.5）。 - 嵌套文件的
@source规则与父文件夹的@source规则能正确协同扫描。
3. 获取安装包
如果访问 GitHub 不便，安装包及中文文档：https://hanshuixin.org/go/2249（内含 tailwindcss-linux-x64、README 中英对照、发布说明中英对照和 LICENSE）。
适用于 Linux x86_64（glibc）。
4. 快速开始
tailwindcss-linux-x64 是一个独立可执行文件，无需安装，下载后添加执行权限即可使用：
bash
# 添加执行权限
chmod +x tailwindcss-linux-x64
# （可选）移动到系统 PATH 以便全局调用
sudo mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss常用命令
bash
# 初始化 Tailwind CSS 项目（创建默认 CSS 文件）
tailwindcss
# 编译 CSS（扫描当前目录模板文件，生成输出）
tailwindcss -i input.css -o output.css
# 监听模式（文件变化时自动重新编译）
tailwindcss -i input.css -o output.css --watch
# 轮询监听模式（适用于 Docker、网络挂载卷等文件事件不可靠的环境）
tailwindcss -i input.css -o output.css --watch --poll
# 压缩输出（生产环境）
tailwindcss -i input.css -o output.css --minify
# 查看帮助
tailwindcss --help注意：Tailwind CSS v4 会自动扫描项目中的模板文件来检测使用的类名，无需配置
content路径。如需显式指定或排除文件，可在 CSS 中使用@source指令。