Tailwind CSS 的替代品

6 个可以替代 Tailwind CSS 的工具。费用、登录、平台与可访问性都是本站实测或从官网核对的。

Tailwind CSS
tailwindcss.cn

工具类优先的 CSS 框架，用 flex、pt-4 这类原子类直接在 HTML 里拼出界面，靠 md:、dark: 前缀处理响应式与夜间模式，适合用 React、Vue 做项目的前端开发者快速搭页面。

工具网页中文
查看详情打开官网

对比

条目费用登录平台国内可直接访问一句
daisyUI — — 网页 待检测 替代工具类拼装这一块：用 btn、card 等语义类名省去堆类名，但仍需 Tailwind 作底层
shadcn/ui 免费 不用登录 网页 待检测 替代搭界面这一块：直接给基于 Tailwind 的现成组件源码，省去自己拼原子类
shadcn/vue 免费 不用登录 网页 待检测 替代搭界面这一块：Vue 项目可直接复制基于 Tailwind 的组件源码，免手拼类名
Bootstrap中文网 — — 网页 待检测 替代快速搭页面这一块：中文手册加现成组件，适合不想自己拼样式的项目
weapp-tailwindcss 免费 不用登录 网页 可以 替代小程序场景这一块：把 Tailwind 构建适配到小程序，Web 端用法不变
Bootstrap 免费 不用登录 网页 可以 替代快速搭页面这一块：预置组件和栅格开箱即用，但放弃原子类写法

详细介绍

部分替代 6
daisyUI 基于 Tailwind CSS 的开源插件，用 btn、card 等语义类名替代成串工具类，颜色走 CSS 变量、换主题不用改类名，适合已在用 Tailwind 的前端开发者快速搭后台和表单页。替代工具类拼装这一块：用 btn、card 等语义类名省去堆类名，但仍需 Tailwind 作底层 shadcn/ui免费不用登录 开源的 React 组件集合，基于 Radix UI 和 Tailwind CSS，把按钮、对话框、表单等源码放在文档站供按需复制，适合想统一团队组件风格、又不愿被第三方库默认样式绑住的前端开发者。替代搭界面这一块：直接给基于 Tailwind 的现成组件源码，省去自己拼原子类 shadcn/vue免费不用登录 unovue 维护的开源 Vue 界面组件集合，以源码复制方式提供按钮、对话框、表单等元素和账户设置、聊天窗口等页面区块，附可预览效果与代码，适合熟悉 Tailwind CSS 的前端在搭中后台时直接取用改造。替代搭界面这一块：Vue 项目可直接复制基于 Tailwind 的组件源码，免手拼类名 Bootstrap中文网 面向中文开发者的 Bootstrap 学习站，提供按组件分章的中英文手册、从安装到栅格的简明教程和 v4.6 至 v5.1 的版本下载，适合刚学前端、想用现成样式快速搭出响应式页面的人边查边练。替代快速搭页面这一块：中文手册加现成组件，适合不想自己拼样式的项目 weapp-tailwindcss免费不用登录国内可直接访问 把 Tailwind CSS 4 适配到小程序的构建期工具，按平台分别产出 Web 与小程序 CSS，适合用 uni-app、Taro 同时维护 H5 和小程序版本的团队保留一个样式入口。替代小程序场景这一块：把 Tailwind 构建适配到小程序，Web 端用法不变 Bootstrap免费不用登录国内可直接访问 开源前端设计系统，提供十二列响应式栅格、按钮导航模态框等预置组件和可单独引入的 JavaScript 插件，并用 Sass 变量统一调主题，适合要快速搭出后台界面或营销页的前端开发者。替代快速搭页面这一块：预置组件和栅格开箱即用，但放弃原子类写法

还有：Bulma、UnoCSS、Windi CSS（未收录）

更新于 11 月 8 日 · 报告问题

查看详情 打开官网tailwindcss.cn