插件：tailwind-magic随着 Tailwind CSS 和 UnoCss 的流行，他创造了更加简便的方式去实现一个页面的样式和布局，但是 Tailwind 和 UnoCss 也有一定的不便。🌈 这个vscode插件是为了解决tailwindcss的语法使用的不便，他能给你带来极致的开发体验和开发效率。## ❓ 为什么要用Tailwind Magic- 因为在使用tailwind css时候会大量使用到 一些自定义的颜色比如rgb或者#fff或者calc等等，这些需要写成bg-[#fff]、w-[calc(100%-20px)]，我觉得会频繁使用到-、[、]，这三个案件时很影响效率的，所以我写了这个插件，他能帮你自动转换成bg#fff、wcalc(100%-20px)，这样你就可以专注于你的业务代码了，不用再去关注这些细节了。- 当我们从浏览器的设计稿去复制一些样式的时候他时带有空格的，你没有办法直接粘贴到bg-[rgba(10, 20, 30)]，他是没办法被tailwind识别的，所以你需要去手动去掉空格，这个插件也能帮你自动去掉空格，你只需要复制粘贴就可以了。- tailwind的语法是需要在class中定义的，但是有些时候，我希望像UnoCss一样可以直接写在属性上，这个插件能够支持你写在属性上，当你保存的时候，自动转换成class，这样你写起来就更加的方便了。## 目前支持的一些处理规则- calc- rgb[a]- px|rem|em|%|vw|vh- 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 -> min-[500px]:w-[10px]