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