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. 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.

!demo

⚙️ Built-in Commands

| Command | Description |
| --- | --- |
| Tailwind Magic: Manage Commands | Opens a quick pick that lets you pause/resume auto transforms, retry authorization, check current status, or jump into the support channel straight from the status bar button. |
| Tailwind Magic: Reload Authorization | Forces Tailwind Magic to obtain a fresh GitHub token and re-validate your whitelist status. Useful when the GitHub auth session changes or the network was flaky. |
| Tailwind Magic: Show Authorization Status | Displays the latest activation status, lifetime license flag, last success/error message, and any queued retry attempts. |
| Tailwind Magic: Open Support Channel | Opens the Discord invite link so you can reach the author when you need help or want to request more quota. |
| Tailwind Magic: Reset Caches | Clears internal transform/style caches (highlighting, class conversions, pseudo-class styles) in case you want to force a fresh recompute after changing configs. |
| Tailwind Magic: Copy Diagnostics | Copies a diagnostic snapshot (current status, retries, platform info) to your clipboard so you can paste it into Discord when asking for help. |

> 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)]

$3

$3

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

$3

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

$3

- You must use - for splicing.

$3

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

$3

- 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]

$3

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:

`md
{
"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

` json
{
"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"
}
}
}
`


$3

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