跳到主要内容
Numio

快速布局：CSS To TailwindCSS类 — Numio

将 CSS 声明转换为 Tailwind CSS 工具类，并按选择器以 @apply 规则显示。可在迁移现有样式时查找对应的工具类。转换器以 Tailwind CSS v3 为目标。

迁移时查找与现有 CSS 规则对应的 Tailwind 工具类。

CSS

TailwindCSS 3.x

适用场景

  • 迁移时查找与现有 CSS 规则对应的 Tailwind 工具类。
  • 通过转换你已熟悉的 CSS 来学习 Tailwind 类名。

使用方法

  1. 粘贴 CSS 规则。
  2. 如果项目使用自定义设置，调整 rem 基准值或 Tailwind 配置。
  3. 将 @apply 后面的类复制到标记或样式表中，然后在 Tailwind 项目中检查效果。

CSS 输入

.card { display: flex; padding: 1rem; }

Tailwind 输出（默认刻度）

.card {
  @apply flex p-4;
}

功能与限制

类名和刻度遵循 Tailwind CSS v3，不保证与 Tailwind CSS v4 的配置和语法兼容。

自定义值、复杂选择器和伪元素可能无法转换。不保证输出外观完全一致，请在实际页面上检查。

自定义配置字段会在浏览器中作为 JavaScript 执行。不要粘贴你不信任的配置。

FAQ

支持 Tailwind CSS v4 吗？

它使用 Tailwind CSS v3 的类名和刻度。flex、p-4、text-sm 等许多工具类在 v4 中名称不变，但 v4 把配置移到了 CSS 中，并重命名了部分工具类，请在 v4 项目中检查输出。

如何用类名代替 @apply？

把 @apply 后面的列表复制到元素的 class 属性中，例如 class="flex p-4"。@apply 形式按原选择器对类进行分组。

能把 Bootstrap 类转换为 Tailwind 吗？

不能。它转换的是 CSS 声明，而不是其他框架的类名。粘贴 Bootstrap 组件背后的 CSS 规则，即可查看对应的工具类。

为什么有些声明没有被转换？

超出 Tailwind 刻度的值、复杂选择器和伪元素可能没有直接对应的工具类。请保留为 CSS，或添加到 Tailwind 配置中。