vscode-tailwind-magic

magic

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

demo

💰 Charging plan

Sponsor me by wechat or alipay, and I will give you more permissions and time to use your GitHub account
For users who haven't experienced it yet, you can find me on discord to get a one-month free experience qualification.
Current plan 15Yuan/month, 150Yuan/year
Any bug or suggestion on the plugin can be communicated on discord, or add me wx: www674949287, pull you into the wx 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"
    }
  }
}

:coffee:

buy me a cup of coffee

License

MIT

simonhe