Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>TailwindPxConverterNew to Visual Studio Code? Get it now.
TailwindPxConverter

TailwindPxConverter

yulin96

|
35 installs
| (0) | Free
自动将w100转换为w-[100px]
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

TailwindPxConverter

TailwindPxConverter 是一款 VSCode 扩展,可自动将 Tailwind CSS 类名中的数值转换为带有像素单位的格式,帮助您更高效地编写样式。

功能介绍

  • 自动转换:将 class 属性中符合规则的类名(例如 w100)转换为 w-[100px] 格式。
  • 可配置规则:支持自定义转换规则,满足不同项目的需求。
  • 手动触发:仅在手动保存时触发转换,避免潜在的冲突。
  • 状态栏指示:在 VSCode 状态栏显示当前转换功能的启用状态。

安装方法

  1. 打开 VSCode,点击左侧活动栏的扩展图标。
  2. 在搜索栏中输入 TailwindPxConverter。
  3. 找到本扩展后点击安装。
  4. 安装完成后重启 VSCode 以激活扩展。

使用说明

  1. 打开需要编辑的文件,确保其中包含 Tailwind CSS 类名。
  2. 编辑文件内容。
  3. 手动保存文件(快捷键:Ctrl+S 或 Cmd+S)。
  4. 扩展将自动扫描并转换符合规则的类名。

示例

<div class="w100 h200"></div>
// 自动转换为
<div class="w-[100px] h-[200px]"></div>
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft