切換到了 Tailwind CSS，真香?。╰ailwind css bootstrap）
你好，我是堅(jiān)持分享干貨的 EarlGrey，翻譯出版過(guò)《Python編程無(wú)師自通》、《Python并行計(jì)算手冊(cè)》等技術(shù)書(shū)籍。
如果我的分享對(duì)你有幫助，請(qǐng)關(guān)注我，一起向上進(jìn)擊。
作者：SSSS
https://juejin.cn/post/7237425753612288055
關(guān)于 Tailwind css
現(xiàn)在再提 tailwind css 也不是什么比較新鮮的事情了，已經(jīng)有很多介紹的文章了，到目前來(lái)說(shuō)，應(yīng)該有不少新項(xiàng)目開(kāi)始嘗試使用它來(lái)開(kāi)發(fā)樣式了。比如說(shuō)，next.js 的 cli 已經(jīng)用 tailwind css 替代 css modules 了：
很早的時(shí)候其實(shí)就想接入 tailwind css 嘗試了，原因無(wú)非就是那幾樣，原子化，design token，更主要的是終于不用再為 class 的命名去傷腦經(jīng)了，但勸退我使用 tailwind css 的幾個(gè)因素：
-
新的東西，又帶來(lái)新的學(xué)習(xí)成本
感覺(jué)更適合新項(xiàng)目，我們的目前的項(xiàng)目使用的都是 css modules，引入進(jìn)來(lái)以后，是不是只能新頁(yè)面才能用，畢竟老頁(yè)面一堆 css modules 文件不可能一點(diǎn)點(diǎn)去改，本來(lái)就不熟悉，改起來(lái)更費(fèi)時(shí)間了
但后面還是還是接入了，接入以后發(fā)現(xiàn)上面的提到的勸退點(diǎn)還是不值一提的，對(duì)于問(wèn)題1，實(shí)際使用的時(shí)候配合上 vscode 插件陳本還是比較低的，而且 tailwind css 的 命名還是有一定規(guī)律的，比如寬度，基本上就是 w-[value/4px]，對(duì)于問(wèn)題 2，因?yàn)樽约汉竺鎸?xiě)了一個(gè)工具，處理起來(lái)也是比較快捷的。
我們大倉(cāng)的6個(gè)項(xiàng)目都已經(jīng)從 css modules 轉(zhuǎn)成 tailwind css 了，其中3個(gè)是我操作的，但整體已經(jīng)是流水線的方式了，所以切換成 tailwind css 過(guò)程還是很簡(jiǎn)單的，我大概分享下自己切換 tailwind css 的過(guò)程
過(guò)程
準(zhǔn)備工作
請(qǐng)一定要安裝 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss&ssr=false#overview這個(gè) vscode 插件，它會(huì)讀取你的 tailwind css 的配置，代碼提示和查看樣式規(guī)則上能帶來(lái)很大的幫助：
安裝
https://tailwindcss.com/docs/installation 官方文檔介紹的非常詳細(xì)了，以 create-react-app 為例：
第一步，安裝 tailwind，生成相對(duì)應(yīng)的配置文件：
npm install -D tailwindcss
// yarn add tailwindcss -D
npx tailwindcss init
文件變化，主要是生成一份配置文件：
配置
關(guān)于配置的說(shuō)明可以直接看官方的文檔 https://tailwindcss.com/docs/configuration#content，對(duì)于我們這種從 css modules 切換 tailwind css 的項(xiàng)目，有些配置需要著重關(guān)注一下：
important, 它可以是boolean類型或者string類型，默認(rèn)是false，對(duì)于新項(xiàng)目我們一般直接設(shè)置成true，設(shè)置成true，對(duì)于樣式規(guī)則，會(huì)加上!important把級(jí)別提到最大，如果是字符串，就相當(dāng)于一個(gè)選擇符，如果設(shè)成important: '#app'，那么對(duì)應(yīng)的 tailwind class 會(huì)變成#app .tailwind-class: { /** */ }這種形式。
content就是文件匹配規(guī)則一般就是設(shè)置成['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}']的形式。
corePlugins，可以選擇對(duì) tailwind 的核心插件配置禁用的規(guī)則，對(duì)于我們這種項(xiàng)目來(lái)說(shuō)，css normalize 一般是已經(jīng)做好了的，所以一定要把它的preflight插件禁掉，不然會(huì)出現(xiàn)一些樣式問(wèn)題
corePlugins: {
preflight: false,
},
theme，主題這個(gè)配置也是非常重要，你可以做些自定義的 class，這個(gè)后面會(huì)說(shuō)，但一般來(lái)說(shuō)，還是需要改下它的font-size，這樣會(huì)讓我們后面書(shū)寫(xiě)字體大小的時(shí)候舒服很多，因?yàn)?tailwind css 的字體大小是大小和行高組合起來(lái)的，這個(gè)一般都接受不了：
你需要加上這個(gè)配置，排除掉行高的影響：
theme: {
// fix tailwind line-height
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px',
'5xl': '48px',
'6xl': '60px',
'7xl': '72px',
},
},
整個(gè)的配置：
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
content: ['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}'],
corePlugins: {
preflight: false,
},
theme: {
extend: {
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '30px',
'4xl': '36px',
'5xl': '48px',
'6xl': '60px',
'7xl': '72px',
},
},
},
plugins: ,
};
在你的入口 css 文件里面加上，注意是 css 文件，別整到 css modules 文件里了：
@tailwind base;
@tailwind components;
@tailwind utilities;
.html {
font-size: 16px;
}
給 html 加上 font-size: 16px主要是處理 tailwind css 的 rem 問(wèn)題。
做完這些，就可以測(cè)試一下是否生效了，找一個(gè)頁(yè)面，加上 <div className="flex"></div>，執(zhí)行yarn start試試是否生效：
當(dāng)你看到這個(gè)就說(shuō)明配置都生效了，這樣就可以開(kāi)心的寫(xiě) tailwind css 了。
開(kāi)發(fā)體驗(yàn)
但是實(shí)際使用的時(shí)候，可能會(huì)碰到一些問(wèn)題，比如這個(gè)長(zhǎng)度沒(méi)找到相對(duì)應(yīng)的，這個(gè)顏色有沒(méi)有，這個(gè)官方文檔也詳細(xì)說(shuō)明了 https://tailwindcss.com/docs/adding-custom-styles。比如我有個(gè) color: #666;就是沒(méi)有相對(duì)應(yīng)的 tailwind class，只需要text-[#666]就好了，或者網(wǎng)頁(yè)有個(gè)主題顏色，這個(gè)顏色在很多地方用到了，但是我不想一直text-[xxx]這樣，只需要：
theme: {
extend: {
textColor: {
666: '#666',
},
backgroundColor: {
666: '#666',
},
},
},
就可以直接使用 text-666和bg-666的形式了：
處理老代碼(針對(duì) JSX/TSX 文件，可選項(xiàng))
這一步是可選項(xiàng)，你可以使用 https://github.com/shiyangzhaoa/css-modules-to-tailwind 來(lái)對(duì)老代碼進(jìn)行轉(zhuǎn)換，嘗試執(zhí)行(執(zhí)行前記得提交代碼，這個(gè)命令會(huì)直接修改你的代碼)：
npx css-modules-to-tailwind src/**/*.tsx -f
// npx css-modules-to-tailwind src/**/*.jsx -f
對(duì)于我的測(cè)試項(xiàng)目，可以看到有 48 文件得到修改：
查看文件變化，對(duì)于 css modules 文件：
對(duì)于 tsx/jsx 文件：
啟動(dòng)項(xiàng)目查看變化：
樣式?jīng)]有變化，class 也轉(zhuǎn)換成功了，完美（bushi
總結(jié)
綜上所述，接入 tailwind css 的成本非常低，對(duì)于我來(lái)說(shuō)，使用起來(lái)也是非常流暢，尤其你稍微熟悉以后，開(kāi)發(fā)起來(lái)速度也是嗖嗖的，強(qiáng)烈推薦～
– EOF –
Tailwind CSS 的開(kāi)發(fā)團(tuán)隊(duì)在開(kāi)源版的基礎(chǔ)上，設(shè)計(jì)了官方的組件庫(kù)，包含有 500 多個(gè)精心設(shè)計(jì)的組件和 10 套網(wǎng)頁(yè)模板。官網(wǎng)單獨(dú)購(gòu)買(mǎi)的話，要快 300 美金，折合接近 2500 塊。
但是如果大家一起共享的話，只需要不到 50 塊就可以享受同官網(wǎng)版本相同的服務(wù)了。有興趣的小伙伴可以前往淘寶詳情頁(yè)了解。
推薦閱讀 點(diǎn)擊標(biāo)題可跳轉(zhuǎn)
1、Python 項(xiàng)目工程化最佳實(shí)踐
2、Python 可以比 C 還要快！
3、streamlit，一個(gè)超強(qiáng)的 Python 庫(kù)
4、豆瓣8.9分的C 經(jīng)典之作，免費(fèi)送！
5、Python 3.12 版本有什么變化？
回復(fù)關(guān)鍵詞「 pybook03」，領(lǐng)取進(jìn)擊的Grey與小伙伴一起翻譯的《Think Python 2e》電子版
回復(fù)關(guān)鍵詞「書(shū)單02」，領(lǐng)取進(jìn)擊的Grey整理的 10 本 Python 入門(mén)書(shū)的電子版
告訴你更多細(xì)節(jié)干貨
歡迎圍觀我的朋友圈
??每天更新所想所悟
