Tailwind2Class

一个 VS Code 插件，帮助你将 HTML 中的 Tailwind CSS 类名提取并转换为语义化的 CSS 类。

✨ 功能特性

• 🔍 智能提取：自动识别选中 HTML 中的 Tailwind 类名
• 📝 语义化命名：将零散的类名转换为有意义的 CSS 类
• 🎨 自动生成 CSS：使用 @apply 指令生成 CSS 代码
• 📦 Vue 支持：Vue 文件自动插入到 <style> 标签中
• ⌨️ 快捷键支持：一键转换，高效便捷

📦 安装

1. 打开 VS Code
2. 打开扩展面板（Ctrl+Shift+X）
3. 点击右上角 ... → 选择「从 VSIX 安装」
4. 选择 tailwind2class-0.1.0.vsix 文件

🚀 使用方法

基础用法

1. 选中代码：在 HTML/Vue 文件中选中包含 Tailwind 类名的代码
2. 触发命令：
   • 使用快捷键：Ctrl+Shift+T（Windows/Linux）或 Cmd+Shift+T（Mac）
   • 或打开命令面板（Ctrl+Shift+P）输入 Tailwind2Class
3. 输入类名：在弹出的输入框中输入语义化类名
4. 完成转换：插件自动替换类名并生成 CSS

示例

转换前：

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
  <!-- 内容 -->
</div>

转换后：

<div class="card">
  <!-- 内容 -->
</div>

生成的 CSS：

.card {
  @apply max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300;
}

⌨️ 快捷键

📁 支持的文件类型

• ✅ HTML（.html）
• ✅ Vue（.vue）- CSS 自动插入到 <style> 标签
• ✅ JSX/TSX（.jsx, .tsx）
• ✅ Svelte（.svelte）

📝 更新日志

v0.1.0

• 初始版本
• 支持 HTML 和 Vue 文件
• 支持快捷键触发
• 智能提取 Tailwind 类名
• 自动生成语义化 CSS

📄 许可证

MIT License

Tailwind2Class - 让 Tailwind CSS 更具语义化！