本篇文章是建立在已了解tailwindcss的基础上,如果不了解tailwindcss,请查看官网tailwindcss.com/
先上一段pdf,如果你用过tailwindcss,你一定能看懂这个pdf,是不是就像魔术一般,我可能在你眨眼间就已经将一个页面的布局排版结构等等的都实现了。
如果你分屏对照ui去写代码,在这个工具的加持下,布局思路清晰的情况下,你觉得可不可能我一天就能撸完几十个页面,对于那些传统的前端来说,他们可能一页面要花1-2天去实现,你可能1天就完成他的十倍,多出来的时间都是你自己的了,等到计划的前2天,你提前说你已经完成了,等待后端提供接口之类的话,是不是会让你的领导感觉你的效率很高,是个人才😂
我这边再聊一下tailwindcss吧 个人的看法:我觉得他相当好,具体表现在,使用成本很低,他不会说,需要你考虑webpack、vite等等构建工具,去额外像插件的方式去使用,而且他是能够直接将最终构建好的css在dev环境去使用,所以不会产生dev和prod环境下css可能会产生不一致的问题,很多人觉得这个东西会造成,项目后续的人维护成本的提升,那可能真的是针对不常用或者根本不远去了解tailwindcss的人来说或许是吧,可我觉得不会,并且他能大大提高开发效率,和减小css体积,何乐而不为呢
这个链接可以帮助一些准备或者刚开始接触tailwindcss的童鞋,to-tailwindcss.netlify.app/
另外分享一些tailwindcss相关的vscode插件Tailwind CSS Intellisense、To Tailwindcss、vscode tailwind magic
新特性:
- 替换了原本w--10px 为 -w10px,更加简化了使用
- mlcalc(100%-20px)或ml-calc(100%-20px)
觉得对你有帮助的话,麻烦给这个插件点点小🌟🌟,能让我有更大的动力,去帮助到大家🙏