最近一直在使用unocss在自己个人的一些页面中使用，突然有一个需求要再老项目中开发一个新功能，涉及到10几个页面，但是unocss在webpack4中的使用遇到了困难，于是我就想到了tailwind。
想必用tailwind都会抱怨我写w-[xx] 撸样式的时候会要大量用的-、\[、\],这3个键，会极大影响效率，其实在unocss部分计算的样式也会遇到同样的问题，只不过tailwind的使用场景会更加多。
于是，我开动大脑想偷懒跳过-、\[、\]，那岂不是美滋滋，写起来更丝滑，灵感就来了，
我判断tailwind环境下，匹配class(Name)?="([^"]*)",来处理一下就行了
- w100px -> w-[100px]
- -translatex100% -> -translate-x-[100%]
- bg-rbga(255, 255, 255, 0.1) -> bg-[rgba(255,255,255,0.1)]
类似于这样的工作再加上一些常用的预设，简直无敌，10几个页面我几小时就撸完了，因为我的unocss比较熟悉，所以tailwind的使用过来也很方便，我完全按照unocss去写，这个插件自动帮我转成tailwind的写法，再配合tailwind官方的Tailwind CSS IntelliSense代码提示，剩下10多天我就一直在摸鱼了😂
在摸鱼期间我想到Tailwind CSS IntelliSense的代码提示好像unocss中并没有这样的插件来辅助，于是灵感来了(灵感多多🤪)，我又看了unocss interactive的源码，拿了获取所有unocss对应的css list实现了一个vscode uno magic,他继承了上面的预设和简写的功能并且还有Tailwind CSS IntelliSense一样的unocss代码提示的能力.
最后推荐几个插件吧
如果你是unocss用户，推荐:
to unocss、vscode uno magic、unocss to css
如果你是tailwind用户，推荐:
to tailwind、vscode tailwind magic、Tailwind CSS IntelliSense
个人开发小玩具
- vscode icones - 将icones的图标webview嵌入了vscode中，省去了打开浏览器找图标
- vscode script - 点击即可执行package脚本
- vscode-css-selector - 针对.或者#智能提示页面中所有的id或class选择
- Generate Variable Names - 生成变量命名的
- skr-hint - 一个低配版的免费copilot实现，需要vpn
- Daily Planner - vscode记录周报和工作计划提醒
- vscode transfer - vscode滑词翻译
