什么是 tailwind-magic
他是解决 tailwindcss 写法上的不便，比如我的设计稿是 width: 19px -> w-[19px], 为什么我不能直接 w19px，然而这一点上 unocss 就有相当大的优势，他更加追寻写法上的简洁，还有一系列的 plugin 和 attributify 的插件，让你直接在属性上写样式，不用一点要点到 class 中，看到这里，想必有很不少人会吐槽，这个 attributify 怎么怎么不好，什么属性冲突，写了不生效等等的抱怨，但这篇文章不是来比较 tailwindcss 和 unocss 的，而是来说 tailwind-magic 的
我们进入重点：
tailwind-magic能弥补tailwindcss不支持attributify的问题，另外他不需要你额外配置，他是vscode插件- 他能直接
w19px或者flex-center再或者tc转换成w-[10px] flex justify-center items-center text-center, 还有更多的转换，可以从文档上来看 - 他支持自定义配置规则，说的这里很多人肯定说，
tailwindcss和unocss提供了shortcuts，你直接配置不就完了吗，并不是所有人对于属性的shortcuts的直觉是一样的，你希望text-是tx,我觉得tx应该是translate-x，还有更多的场景，比如tx，你在class中直接读到class="tx19px"，这玩意你让别人怎么能一样知道他是啥，我还需要 hover 去安装tailwind或者unocss的vscode插件，去提供对应样式，然后可能给到的样式是一大片，我觉得不方便，可能有的人觉得他比text-[19px],对于template层面上的字符是减少了很多，不会让你的class过于臃肿，但却失去了一眼能看出的语义化，我个人的观点是弊大于利的，然后tailwind-magic是可以完美解决这个问题的，他直接你自定义配置个人的shortcuts，你写完保存后，会变成对应原始的tailwind语法，这样你写起来爽，但是也不丢失语义化，新人来学tailwind官网的语法，也是能一眼知道这个属性是什么css的属性 - 他还有许多参数的配置化，比如
严格模式、贪婪模式等等，目的是为了解决你项目中不规范的class被错误的转换，和更加偷懒的去写样式，我甚至会考虑到，许多人分不清楚flex场景下row和column时，到底哪一个是对应水平居中，哪一个属性是垂直居中，我提供了x-center和y-center,会根据你是否是flex-col自动处理 - 他不仅提供了
attributify的能力，当然也提供了vscode中的代码智能提示，为了让你写的更得心应手 - 他提供了一些很细节的处理，比如你用
flex 相关的属性，他会自动带上flex,再比如你写了border#eee会自动带出border-solid border
说的这里，如果说你已经被我安利到了，快来点赞下载这个插件吧 tailwind-magic
补充一点: 如果你想用 tailwind 的语法，但是不知道 css 如何写，你可以试试 css-to-tailwindcss-playground, 将你的 css 输入，会得到对应的 tailwindcss 的写法
