菜鳥上班已經兩年了，從一個對技術充滿熱情的小伙子，變成了一個職場老鳥了。自以為自己在不停的學習，但是其實就是學一些零碎的知識點，比如：vue中什么東西沒見過、js什么特性沒用過、css新出了個啥 ……

菜鳥感覺自己也出現了惰性，就是暫時用不上的或者學習成本比較大的，就直接收藏了，想著后面再來學習；然后那些很快能接收有用的小的知識點，就感覺看過幾次就收藏了，后面有用，就來收藏里面翻一下就行！

但是菜鳥最近再來回想才發現，這些其實都是虛的，程序員最重要的應該是思維模式，以及如何把學的東西、好用的東西用起來，找到應用場景，而不是到時候再去找。

正如標題所說，菜鳥其實很早就知道css原子化，但是一直都走不出自己的舒適圈，感覺就寫點css也挺好，為什么還要花力氣去記別人想好的類名？要是一直用這些，豈不是css知識都忘記完了？

直到我們公司的大佬來了之后，力推tailwind，而菜鳥感覺和大佬的差距真的很大，所以又激起了菜鳥想要學習的興趣！

怎么從css過渡到tailwind

菜鳥在之前，是很不想使用tailwind的，因為菜鳥感覺里面很多類名需要去記，而且和我之前取類名的方式也不一樣！相信大部分人都和菜鳥一樣，在用tailwind之前，取類名一般都是和包裹的內容相關的名字，例如：contentBox、title、asideBox ……

前期使用不熟的時候直接打開官網就行：https://www.tailwindcss.cn/docs/installation

菜鳥告訴大家一個辦法，就是別想著去記類名，直接你想要用什么css屬性，直接點擊搜索即可，敲入你想使用的屬性

多用幾次，自然就記住了，而且現在編譯器有提示的。用了tailwind之后，只能說句真香，因為再也不會有怎么取名以及有重名的困擾了！

tailwind yyds

一開始菜鳥用tailwind，感覺也不是很自由啊！

菜鳥就感覺這個也太low了吧，我要是想用別的值怎么辦？直到菜鳥看到了這個

基本上有了這個，就可以天下無敵了，想多少就多少，這就是自由的感覺！

反正菜鳥基本上用的都是這個，不管是顏色還是大小，除非比較好記的，例如：w-1、w-2、p-1、p-2、m-1、mr-1 ……

tailwind 自定義類名

有一個問題，就是當類名太多的時候，感覺也不是很好看，這個時候就要用到復雜一點的tailwind，見文檔：https://www.tailwindcss.cn/docs/reusing-styles

很多地方都用到一樣的樣式，就適合這種方式！不然直接多寫幾個類名也不是不能接受！

@layer

這個@layer components是避免樣式沖突和被覆蓋的作用，菜鳥感覺不好理解，但是你肯定不會去重寫tailwind的類名，至于有沒有樹搖優化那就是菜鳥沒有涉獵了，反正就當默認寫法比較好理解，一般也確實就是這樣寫。

這里也可以看看tailwind4的官網，感覺說得清楚一點：https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

當然有懂的讀者，可以指點江山，激揚文字！

更多函數或指令

tailwind中不止有@layer、@apply，只是 菜鳥主要就用了這兩個，更多見官網：https://tailwindcss.com/docs/functions-and-directives

類名太多，團隊規范

當一個元素類名比較多時，每個人的想法都不一樣，那么類名就會比較雜亂，可能每個人都不一樣，看著就不是很好，這個時候就要使用自動格式化工具了，讓每個人的類名排列順序都是一樣，也避免了不少沖突！

插件地址：https://github.com/tailwindlabs/prettier-plugin-tailwindcss

只要使用了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 中有明確的說明，見：https://tailwindcss.com/docs/compatibility

菜鳥只能說tailwind的目標很宏大！

總結

tailwind使用不難，所以菜鳥也沒啥可以寫得很多或者很復雜的，菜鳥只是希望這個經歷可以讓各位新手趕緊掌握tailwind，不是css用不起，而是tailwind更有性價比！