文章目录
-
- [1. Tailwind CSS 简介](#1. Tailwind CSS 简介)
- [2. v4.3.3 版本亮点](#2. v4.3.3 版本亮点)
- [3. 获取安装包](#3. 获取安装包)
- [4. 快速开始](#4. 快速开始)
1. Tailwind CSS 简介
Tailwind CSS 是一款实用优先（utility-first）的 CSS 框架，由 Adam Wathan、Steve Schoger 和 Jonathan Reinink 于 2017 年创建。不同于 Bootstrap 等传统 UI 框架提供预设计组件，Tailwind CSS 提供了大量原子化的 CSS 工具类（如 flex、pt-4、text-center），开发者直接在 HTML 中组合这些类来构建界面。这种"不离开 HTML"的工作方式极大地提升了开发效率，使 Tailwind CSS 迅速成为前端开发领域最受欢迎的 CSS 框架之一，截至 2026 年 GitHub 上已获得超过 85,000 颗星标。
Tailwind CSS v4.0 于 2025 年初发布，是一次全面重写。新版本采用 CSS 优先的配置方式------不再需要 tailwind.config.js，所有配置直接写在 CSS 中，利用现代 CSS 特性（@layer、@import、自定义属性等）实现按需生成样式，开箱即用零配置。构建引擎用 Rust 重写为独立 CLI 二进制文件（tailwindcss），性能大幅提升，同时通过 Oxide 引擎与 Node.js 生态保持兼容。
Tailwind CSS 的核心特色包括：
- 实用优先：丰富的原子化 CSS 工具类库，覆盖布局、间距、颜色、排版、动画等各个方面
- 即时构建（JIT）：仅生成项目中实际使用的 CSS，生成的 CSS 文件极小，生产环境通常仅几 KB
- 高度可定制 ：通过 CSS 自定义属性和
@theme指令自由扩展设计系统，无需离开 CSS - 独立 CLI：Rust 编写的原生二进制文件，不依赖 Node.js，构建速度极快
- 丰富的生态：官方支持的 VS Code 插件（Tailwind CSS IntelliSense）、Prettier 插件、Headless UI 组件库、Tailwind UI 模板市场等
2. v4.3.3 版本亮点
v4.3.3 于 2026 年 7 月 16 日发布，是一个维护（patch）版本，共包含 14 项修复，主要改进如下：
CLI 与构建工具：
- 支持在
@tailwindcss/cli中使用--watch --poll[=ms]，适用于文件系统事件不可靠或不可用的场景 - 仅在
@tailwindcss/cli --watch模式下按需加载@parcel/watcher，使一次性构建和--watch --poll在无法加载@parcel/watcher时也能正常工作 - 确保
@tailwindcss/postcss在 Sass 等预处理器更改输入 CSS 而未更改磁盘上的输入文件时也能重新构建 - 确保即使不运行 Lightning CSS（如在
@tailwindcss/browser和 Tailwind Play 中）也能正确处理 CSS 嵌套 - 防止
@tailwindcss/upgrade在从子目录运行时改写被忽略的文件 - 防止
@tailwindcss/vite在扫描的文件已被 Vite 处理但尚未作为模块加载时触发整页刷新
CSS 处理与颜色：
- 规范化（canonicalization）：匹配任意十六进制颜色与主题颜色时不区分大小写（例如
bg-[#fff]和bg-[#FFF]均匹配为bg-white） - 防止无色相（achromatic）主题颜色在
oklch等极坐标色空间中混合时发生色相偏移 - 确保
--spacing(0)被优化为0px而非0，以便在calc(...)中仍作为<length>类型使用
选择器与主题函数：
- 将
[data-foo]div这样的选择器解析为两个独立选择器而非一个 - 确保 JS 插件中
theme('colors.foo')在同时存在--color-foo和--color-foo-bar时正确解析 - 确保小数不透明度修饰符（fractional opacity modifiers）与具名阴影尺寸配合使用，如
shadow-sm/12.5、text-shadow-sm/12.5、drop-shadow-sm/12.5和inset-shadow-sm/12.5
其他修复：
- 防止 Preflight 覆盖 Firefox 原生的
iframe:focus-visible轮廓样式 - 使用显式平台字体替代
system-ui和ui-sans-serif，使 CJK 文本在 Windows 上能正确遵循页面的lang属性 - 确保当后续
@source规则指向父文件夹中的文件时，之前指向嵌套文件的@source规则仍被扫描
3. 获取安装包
如果访问 GitHub 不便，安装包及中文文档：https://hanshuixin.org/go/224A（内含 tailwindcss-macos-arm64、README 中英对照、发布说明中英对照和 LICENSE）。
适用于 macOS arm64（Apple Silicon）。
text
macOS安装tailwindcss-v4.3.3（tailwindcss-macos-arm64）.zip
├── tailwindcss-macos-arm64
├── macOS安装tailwindcss-v4.3.3（tailwindcss-macos-arm64）.pdf
├── README/
│ ├── README.md
│ └── README-中文版.md
├── 发布说明/
│ ├── RELEASE-NOTES.md
│ └── RELEASE-NOTES-中文版.md
└── LICENSE4. 快速开始
tailwindcss-macos-arm64 是 Tailwind CSS 的独立 CLI 可执行文件，不依赖 Node.js。使用前需解除 macOS 的隔离属性并赋予执行权限：
bash
# 解除"未知开发者"隔离属性
xattr -c ./tailwindcss-macos-arm64
# 赋予执行权限
chmod +x ./tailwindcss-macos-arm64安装到系统路径（可选）：
bash
# 将 tailwindcss 可执行文件复制到 /usr/local/bin
sudo cp ./tailwindcss-macos-arm64 /usr/local/bin/tailwindcss常用命令：
bash
# 初始化 Tailwind CSS 项目
tailwindcss init
# 编译 CSS（监听模式）
tailwindcss -i input.css -o output.css --watch
# 生产环境构建（压缩输出）
tailwindcss -i input.css -o output.css --minify