Tailwind CSS：不用写 CSS 文件，前端样式还能这么拼

GitHub 仓库

tailwindlabs/tailwindcss

总 Stars

★ 98,129

主要语言

TypeScript

查看 GitHub 项目

结论先说

Tailwind CSS 是 utility-first 的 CSS 框架：不写传统 CSS 类名，改用原子类在 HTML 里直接拼样式，拼出什么样就是什么样。GitHub 总 star 9.8 万（2026-10-27 核验，TypeScript、MIT 协议，最近提交 2026-10-19）。本篇是编辑精选深写，不是当日榜单项目。

是什么

传统写法是“写样式表、再给元素挂类名”；Tailwind 反过来：样式就是一堆小类名（flex、pt-4、text-gray-700），在标签里拼出来，所见即所得，改样式不用在两个文件之间跳。

能干嘛

• 快速搭管理后台、落地页、内容站的界面
• 做设计系统：用配置文件统一颜色、间距、字体
• 配合组件框架（Vue、React）做高定制界面

适合谁

• 讨厌在 CSS 文件里翻来翻去的前端开发者
• 要快速出界面的独立开发者与小团队
• 做高度定制 UI、不想被组件库外观绑死的人

注意点

初期 HTML 会显得臃肿，类名一长串是常态，需要适应；类名记忆成本不低，建议配合编辑器插件做提示。还有一点：Tailwind 是“拼样式”的工具，不是现成组件库，想要开箱即用的按钮、表格，还得自己拼或另找组件库。

问：Tailwind 和 Bootstrap 选哪个？

看你要什么：Bootstrap 是“拿现成组件快速拼页面”，Tailwind 是“按自己的设计自由拼界面”。外观要求越高、定制越多，Tailwind 越划算；只求快、不在乎撞脸，Bootstrap 更省事。

站长点评

我自己站点的界面就是类似思路拼出来的，所以对 Tailwind 的判断很直接：它把“样式调试”从文件跳转变成了标签内直改，省下的时间是真实的。前提是接受 HTML 变长的代价，接受不了的人别勉强。

项目地址：https://github.com/tailwindlabs/tailwindcss