vscode-tailwind-magic

English | 简体中文

🌈 This VSCode plugin is designed to solve the inconvenience of using TailwindCSS syntax. It can bring you the ultimate development experience and development efficiency. If you use UnoCSS, you can choose Unot.

In addition, if the third-party style you introduce is similar to Tailwind syntax and there is a conflict, you may need to add prefix to the current project. The plugin can detect and automatically add prefix when saving.

Currently, the plugin provides [paid plans](#-paid plans). If you haven’t tried it yet, you can find me on Discord and get a free month trial.

❓ Why is Tailwind Magic recommended

🎉 Advantages

• You are not limited to using TailwindCSS syntax in class or className, you can use it anywhere
• Extremely free mapping and abbreviation, but it will be converted back to Tailwind syntax to ensure that the final code is in line with the syntax of tailwindcss and can be semantic
• It can automatically bring out the attributes that should be included, such as col -> flex flex-col, border#eee -> border-[#eee] border border-1, etc.
• It can use all the simple syntax of UnoCss, even simpler, such as bg#fff -> bg-[#fff], and can also use hover:(text-red bg-blue) -> hover:text-red hover:bg-blue and other syntax

〽️ Recommendations

• Use the latest version of vscode
• If there is an abnormality after the automatic update, you can uninstall and reinstall it.
• It is recommended to use it with totailwindcss, which can use the browser After copying the style, it directly outputs the syntax of tailwindcss to the corresponding position of the plug-in, and can hover the native css prompt the corresponding syntax of tailwindcss.

⚙️ Built-in Commands

Tip: the Tailwind Magic status bar item now reflects your authorization state (✅ active, ❌ inactive, ⏳ retrying). Clicking it launches the manage-commands quick pick described above.

💰 Paid plans & support

• Sponsor me via WeChat/Alipay to unlock longer usage for your GitHub account.
• New users can ping me on Discord to obtain a one-month free trial slot.
• Current pricing: ¥15 / month or ¥150 / year.
• For bugs, feature requests, or urgent quota bumps, reach me on Discord or add WeChat www674949287 so I can pull you into the private group.

💪 Supported types

• calc
• rgb[a]
• px|rem|em|%|vw|vh
• simple preset
• w|h|gap|m|mt|mr|mb|ml|p|pt|pr|pb|pl|b|bt|br|bb|bl|lh|top|right|bottom|left
• w1! -> !w-1
• maxw10px -> max-w-[10px]
• gapx10px -> gap-x-[10px]
• translatex50% -> translate-x-[50%]
• -translatex50% -> -translate-x-[50%]
• text-[red,hover:pink,2xl,lg:hover:3xl] -> text-red hover:text-pink text-2xl lg:hover:text-3xl
• flex-center -> flex justify-center items-center
• col -> flex flex-col
• eclipse -> text-ellipsis whitespace-nowrap overflow-hidden
• pointer -> cursor-pointer
• ma -> m-auto
• text10rpx -> text-[length:10rpx]
• hover:(text-red bg-blue) -> hover:text-red hover:bg-blue
• >500px:w10px -> max-[500px]:w-[10px]
• <500px:(w10px h20px) -> min-[500px]:w-[10px] min-[500px]:h-[20px]
• whfull -> w-full h-full
• url(./a.png) -> bg-[url(./a.png)]

Mode description

Enable aggressiveMode

{
"tc": "text-center",
"ts": "text-start",
...
}

Enable attributifyMode

• You can write bg#fff directly on the attribute, and it will be automatically converted to bg-[#fff] after saving.

Enable strictMode

• You must use - for splicing.

Enable variantGroup

• You can convert hover:(text-red bg-blue) to hover:text-red hover:bg-blue.

Small details

• flex-center -> flex justify-center items-center
• col -> flex flex-col
• pointer -> cursor-pointer
• pointer-none -> cursor-none
• >500px -> max-[500px]
• <500px -> min-[500px]
• Use x-center or y-center based on row or col
• gridx4y4 -> grid-cols-4 grid-rows-4
• bb#eee -> border-b-[#eee] border-b border
• f400 -> font-400, f10px -> text-[10px]

Custom injection rules presets

tailwindMagic.presets supports custom injection rules, examples:

[
  ["tnw", "text-no-wrap"]
]

Notes

• tailwind-magic will convert the properties of custom components, such as block in some el-button. You can skip these conversions through skipMappings, as shown below:

{
  "tailwindMagic.skipMappings": {
   "el-form": ["inline"],
   ...
  }
}

Parameter configuration

• You can control the matching rules through configuration, for example, whether the generated calculation result is -[10px] or -10px.
• attributifyMode defaults to true, enabling the ability to automatically convert tailwind attributes into classes, just like the writing of unocss's attributify, automatically converted after saving

{
  "properties": {
    "tailwindMagic.variantGroup": {
      "type": "boolean",
      "default": true,
      "description": "Enable/disable transform hover:(x1 x2) to hover:x1 hover:x2"
    },
    "tailwindMagic.strictMode": {
      "type": "boolean",
      "default": false,
      "description": "if true bg#fff or bgrgba(0,0,0,.0) will transform bg-[#fff] or bg-[rgba(0,0,0,.0)]"
    },
    "tailwindMagic.attributifyMode": {
      "type": "boolean",
      "default": true,
      "description": "if true the attribute bg#fff will transform class=\"bg-[#fff]\""
    },
    "tailwindMagic.presets": {
      "type": "array",
      "default": [],
      "description": "set transform rules"
    },
    "tailwindMagic.code": {
      "type": "boolean",
      "default": "",
      "description": "activation code"
    },
    "tailwindMagic.aggressiveMode": {
      "type": "boolean",
      "default": false,
      "description": "After turning on aggressive mode, it will be more abbreviated, such as t1 -> top-1"
    }
  }
}

Cache limits (developer)

Two new settings were added to control internal caches used by the extension at runtime. These are advanced options and only needed in very large repositories.

• tailwindMagic.styleCacheLimit (number, default: 500) — maximum number of style entries cached by generateStyle. When the limit is exceeded the extension evicts the least-recently-used entries.
• tailwindMagic.colorCacheLimit (number, default: 1000) — maximum number of color entries cached for computed styles.
• tailwindMagic.transformCacheLimit (number, default: 500) — limits how many attribute transform results are cached while rewriting files. Lower it if you work in extremely large files and want to bound memory usage.

If you experience high memory usage in huge projects, try lowering these values.

Developer changelog

• 2025-10-11 — Implemented Map-based LRU caches for style/color computation (generateStyle), added configuration keys for cache limits, and added unit tests and mocks so the test-suite runs in Node environments.

:coffee:

buy me a cup of coffee

License

MIT