不喜欢广告？ 去 无广告 今天
Tailwind CSS 类到纯 CSS 转换器
开发人员文本
广告 移除？
广告 移除？
指导
Tailwind CSS 类到纯 CSS 转换器
粘贴一段 Tailwind v3 工具类字符串，即可立即获得对应的纯 CSS 规则。每个 Tailwind 类都会展开为其精确的 CSS 声明，并使用官方设计令牌中的正确 rem、px 和颜色值——无需猜测，无需四舍五入。
在将 Tailwind 组件迁移到原生 CSS 时非常有用，当你想要检查底层声明，或需要在不使用 Tailwind 构建步骤的情况下打包手写 CSS 时。
如何使用
- 将你的 Tailwind 类字符串粘贴到输入框中（例如
flex items-center gap-4 p-6 bg-blue-500). - 可选地更改选择器——默认为
.element. - 在输出面板中阅读生成的 CSS。响应式变体（
md:,lg:…) 会被包裹在相应的@media查询中；状态变体（hover:,focus:…) 会生成自己的选择器。 - 复制结果或将其下载为一个
.css文件。
特征
- 完整的间距层级 ——每个 Tailwind 的边距、内边距、间距、宽度和高度值都会解析为标准的 rem 或 px 输出。
- 完整的颜色体系 ——所有 22 个颜色家族及其 50 到 950 级别都会映射到其精确的十六进制代码，用于文本、背景、边框、填充和描边。
- 响应式变体 -
sm:,md:,lg:,xl:，并且2xl:会被生成为正确的@media (min-width: ...)块。 - 状态变体 -
hover:,focus:,active:,disabled:,group-hover:,peer-focus:,dark:,before:,after:及其他内容都会变成真正的 CSS 选择器或媒体查询。 - 任意值 ——如
w-[37rem]或bg-[#abc123]的方括号语法会直接传递到相应的声明中。 - 负向工具类 ——如
-mt-4的前导连字符形式会产生正确的负 rem 值。 - 自定义选择器 ——可以选择任意选择器来包裹输出规则（
.card,#hero，等等）。 - 复制和下载 ——一键复制 CSS 或将其保存为文件。
广告 移除？
常问问题
-
工具类 CSS 与组件式 CSS 有何区别？
工具类 CSS 提供单用途类（例如 flex、p-4、text-center），每个类对应一个 CSS 声明，因此样式直接在标记语言中实现。组件式 CSS 将多个声明组合在语义化类名下（例如 .card、.button），描述元素而非其外观。工具类 CSS 以更大的 HTML 为代价换取可预测、可重用的原子类；组件式 CSS 以更大的样式表为代价换取更高层级的抽象。
-
Tailwind 的间距层级与 rem 单位有何关系？
Tailwind 的默认间距层级是基于 0.25rem 的倍数，其中 1rem 等于默认浏览器中的 16px。因此 p-4 解析为 padding: 1rem（16px），p-2 为 0.5rem（8px），p-6 为 1.5rem（24px）。例外情况是 spacing-0（0px）和 spacing-px（1px），它们绕过 rem 单位，以便你能够放置像素级边框或细线间距，无需进行计算。
-
为什么响应式工具类框架默认使用最小宽度媒体查询？
像 Tailwind 这样的移动优先框架使用最小宽度查询，使基础样式针对最小视口，并在更大屏幕上逐步增强。这符合移动浏览器在最终布局确定前的渲染方式，避免在慢连接上出现“错误样式闪现”现象，并确保每个断点仅覆盖变化部分——保持级联的累加性而非减法。
