Linux下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-linux-x64)

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 是一个独立可执行文件,无需安装,下载后添加执行权限即可使用:
# 添加执行权限
chmod +x tailwindcss-linux-x64
# (可选)移动到系统 PATH 以便全局调用
sudo mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss常用命令
# 初始化 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指令。