Tailwind CSS 语义化转换神器

Tailwind2Class

选中包含 Tailwind 类名的 HTML 元素,只需一个快捷键或右键菜单,即可完成转换:

转换前:

<div class="flex items-center justify-center bg-gray-100 rounded-lg p-4 shadow-md hover:bg-gray-200 transition-colors">
  <span class="text-xl font-bold text-blue-500">Hello World</span>
</div>

转换后:

<div class="card">
  <span class="card-title">Hello World</span>
</div>

同时自动生成对应的 CSS:

.card {
  @apply flex items-center justify-center bg-gray-100 rounded-lg p-4 shadow-md hover:bg-gray-200 transition-colors;
    .card-title {
      @apply text-xl font-bold text-blue-500;
    }
}

多种触发方式

  • 快捷键: Ctrl+Shift+T(Windows/Linux)/ Cmd+Shift+T(Mac)

  • 右键菜单: 在编辑器中右键,选择「提取并转换 Tailwind 类名」

  • 命令面板: Ctrl+Shift+P 输入命令名称


Tailwind CSS 语义化转换神器
http://localhost:8090/archives/tailwind-css-yu-yi-hua-zhuan-huan-shen-qi
作者
Administrator
发布于
2025年12月04日
许可协议