tailwindcss

tailwindcss

把小型工具类直接写在标记里来给网页界面加样式，前端开发者不必为每个部分单独写 CSS 规则，就能快速做出自定义设计。

由 tailwindlabs 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

简介

它是什么：Tailwind CSS 是一个工具类优先的 CSS 框架，用来快速搭建自定义界面。你不用为每个组件单独写一条规则，而是用一个个只负责一件事的小类来给元素加样式。它用 TypeScript 编写。

适合谁：想快速搭建自定义网页界面的前端开发者和会写代码的设计师，最能用好它。

行业 | 谁在用 | 怎么用 | 例子
网页开发 | 前端开发者 | 在标记里加工具类，给页面和应用加样式 | 一个注册页的响应式布局
产品设计 | 会写代码的设计师 | 不用单独的样式表，就把设计变成可用的样式 | 带间距、颜色和圆角的卡片
软件团队 | 交付应用的小团队 | 把样式和标记放在同一处 | 带表单和按钮的设置页

如果你不做网页界面，可以跳过它。

用在哪里：

• 网页和网页应用：任何用 CSS 加样式的地方
• 使用 PostCSS 的项目：项目把它列为主题之一
• 响应式布局：另一个列出的主题，用于随屏幕大小调整的页面

使用场景 | 适合谁 | 得到什么
自定义界面样式 | 前端开发者 | 由小型类搭出的设计好的界面
响应式页面 | 网页设计师 | 能适应不同屏幕大小的布局

如何设置：

• 电脑上装好 Git
• 一个要加样式的网页项目

1. 用 git 克隆这个仓库。
2. 按它的 README 里的说明设置，因为这个工具包里的东西不会自己运行。

新手与专家：如果你是新手，第一步可以拿一个普通的 HTML 页面，用这个框架的类给标题和按钮加样式。项目自己的文档站列出了各个类名。

如果你熟悉 CSS，取舍很清楚：样式写在标记里，由许多小类组成，所以你要写的自定义规则更少，但 HTML 里的类列表会更长。这个项目标注了 PostCSS 和 functional CSS。

写好你的 HTML 元素
给每个元素加上工具类
样式显示在页面上
调整类名来完善设计

注意事项：

• License: MIT
• Cost to run: none named
• What the kit holds: 项目的说明笔记和代码所在的位置。里面的东西不会自己运行。
• Documentation: 在项目自己的网站上，仓库里附有链接

GitHub 上的数据（2026年11月8日）

• 星标：98,491（当天 122）
• 复刻：7,109
• 关注：737
• 未关闭的议题和拉取请求：113
• 语言：TypeScript
• 许可证：MIT
• 话题：css, css-framework, functional-css, postcss, responsive, tailwindcss, utility-classes
• 趋势：GitHub 趋势榜当日第 11 名（2026年11月8日）

链接

• 代码：https://github.com/tailwindlabs/tailwindcss
• 网站：https://tailwindcss.com/
• 发布版本：https://github.com/tailwindlabs/tailwindcss/releases
• 议题：https://github.com/tailwindlabs/tailwindcss/issues
• 星标历史：https://www.star-history.com/#tailwindlabs/tailwindcss&Date

获取代码

git clone https://github.com/tailwindlabs/tailwindcss.git

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。