macOS下载、安装 Tailwind CSS-v4.3.3（附安装包tailwindcss-macos-arm64）

发布于 2026/7/27 · 1 阅读
Tailwind CSSCSS 框架实用优先utility-first前端开发CLIRustmacOSApple Silicon开源软件
Tailwind CSS 是一款实用优先的 CSS 框架，2017 年创建，GitHub 超 85,000 星标。v4.0 采用 CSS 优先配置，独立 CLI 用 Rust 重写，不依赖 Node.js 即可运行。

文章目录

封面.png

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）。

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
└── LICENSE

4. 快速开始

tailwindcss-macos-arm64 是 Tailwind CSS 的独立 CLI 可执行文件，不依赖 Node.js。使用前需解除 macOS 的隔离属性并赋予执行权限：

# 解除"未知开发者"隔离属性
xattr -c ./tailwindcss-macos-arm64

# 赋予执行权限
chmod +x ./tailwindcss-macos-arm64

安装到系统路径（可选）：

# 将 tailwindcss 可执行文件复制到 /usr/local/bin
sudo cp ./tailwindcss-macos-arm64 /usr/local/bin/tailwindcss

常用命令：

# 初始化 Tailwind CSS 项目
tailwindcss init

# 编译 CSS（监听模式）
tailwindcss -i input.css -o output.css --watch

# 生产环境构建（压缩输出）
tailwindcss -i input.css -o output.css --minify