工作两年，最后从css转向tailwind了！

菜鸟上班已经两年了，从一个对技术充满热情的小伙子，变成了一个职场老鸟了。自以为自己在不停的学习，但是其实就是学一些零碎的知识点，比如：vue中什么东西没见过、js什么特性没用过、css新出了个啥 ……

菜鸟感觉自己也出现了惰性，就是暂时用不上的或者学习成本比较大的，就直接收藏了，想着后面再来学习；然后那些很快能接收有用的小的知识点，就感觉看过几次就收藏了，后面有用，就来收藏里面翻一下就行！

但是菜鸟最近再来回想才发现，这些其实都是虚的，程序员最重要的应该是思维模式，以及如何把学的东西、好用的东西用起来，找到应用场景，而不是到时候再去找。

正如标题所说，菜鸟其实很早就知道css原子化，但是一直都走不出自己的舒适圈，感觉就写点css也挺好，为什么还要花力气去记别人想好的类名？要是一直用这些，岂不是css知识都忘记完了？

直到我们公司的大佬来了之后，力推tailwind，而菜鸟感觉和大佬的差距真的很大，所以又激起了菜鸟想要学习的兴趣！

怎么从css过渡到tailwind

菜鸟在之前，是很不想使用tailwind的，因为菜鸟感觉里面很多类名需要去记，而且和我之前取类名的方式也不一样！相信大部分人都和菜鸟一样，在用tailwind之前，取类名一般都是和包裹的内容相关的名字，例如：contentBox、title、asideBox ……

前期使用不熟的时候直接打开官网就行：http://www.tailwindcss.cn/docs/instal…

菜鸟告诉大家一个办法，就是别想着去记类名，直接你想要用什么css属性，直接点击搜索即可，敲入你想使用的属性

多用几次，自然就记住了，而且现在编译器有提示的。用了tailwind之后，只能说句真香，因为再也不会有怎么取名以及有重名的困扰了！

tailwind yyds

一开始菜鸟用tailwind，感觉也不是很自由啊！

菜鸟就感觉这个也太low了吧，我要是想用别的值怎么办？直到菜鸟看到了这个

基本上有了这个，就可以天下无敌了，想多少就多少，这就是自由的感觉！

反正菜鸟基本上用的都是这个，不管是颜色还是大小，除非比较好记的，例如：w-1、w-2、p-1、p-2、m-1、mr-1 ……

tailwind 自定义类名

有一个问题，就是当类名太多的时候，感觉也不是很好看，这个时候就要用到复杂一点的tailwind，见文档：http://www.tailwindcss.cn/docs/reusin…

很多地方都用到一样的样式，就适合这种方式！不然直接多写几个类名也不是不能接受！

@layer

这个@layer components是避免样式冲突和被覆盖的作用，菜鸟感觉不好理解，但是你肯定不会去重写tailwind的类名，至于有没有树摇优化那就是菜鸟没有涉猎了，反正就当默认写法比较好理解，一般也确实就是这样写。

这里也可以看看tailwind4的官网，感觉说得清楚一点：tailwindcss.com/docs/adding…

当然有懂的读者，可以指点江山，激扬文字！

更多函数或指令

tailwind中不止有@layer、@apply，只是 菜鸟主要就用了这两个，更多见官网：tailwindcss.com/docs/functi…

类名太多，团队规范

当一个元素类名比较多时，每个人的想法都不一样，那么类名就会比较杂乱，可能每个人都不一样，看着就不是很好，这个时候就要使用自动格式化工具了，让每个人的类名排列顺序都是一样，也避免了不少冲突！

插件地址：github.com/tailwindlab…

只要使用了prettier就可以使用这个，关于prettier的知识可以见：vue3+vite+eslint|prettier+elementplus+国际化+axios封装+pinia

使用tailwind不会忘记css，更是加强css

菜鸟之前对tailwind的误解有点深，其实使用tailwind根本不会降低我们的css水平，相反，你平时多逛逛tailwind官网，反而能发现一些你从未使用过或者使用很少的css属性，你会用tailwind实现，其实就是css会实现，反正都可以增加你对css某个属性的理解，且tailwind还附带了效果示例！

Trae 对 tailwind 的支持

之前的代码

<el-button
:loading="loading"
size="large"
type="primary"
s =tyle="width: 100%"

  @click.prevent="handleLogin"

>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>

实现效果

感觉Trae对tailwind的支持挺好的，一些简单的效果都可以快速实现！

tailwind 可以替代 scss 等

tailwind4 中有明确的说明，见：tailwindcss.com/docs/compat…

菜鸟只能说tailwind的目标很宏大！

总结

tailwind使用不难，所以菜鸟也没啥可以写得很多或者很复杂的，菜鸟只是希望这个经历可以让各位新手赶紧掌握tailwind，不是css用不起，而是tailwind更有性价比！