你好，我是堅(jiān)持分享干貨的 EarlGrey，翻譯出版過《Python編程無師自通》、《Python并行計(jì)算手冊》等技術(shù)書籍。

如果我的分享對你有幫助，請關(guān)注我，一起向上進(jìn)擊。

作者：SSSS

https://juejin.cn/post/7237425753612288055

關(guān)于 Tailwind css

現(xiàn)在再提 tailwind css 也不是什么比較新鮮的事情了，已經(jīng)有很多介紹的文章了，到目前來說，應(yīng)該有不少新項(xiàng)目開始嘗試使用它來開發(fā)樣式了。比如說，next.js 的 cli 已經(jīng)用 tailwind css 替代 css modules 了：

很早的時候其實(shí)就想接入 tailwind css 嘗試了，原因無非就是那幾樣，原子化，design token，更主要的是終于不用再為 class 的命名去傷腦經(jīng)了，但勸退我使用 tailwind css 的幾個因素：

1. 新的東西，又帶來新的學(xué)習(xí)成本

2. 感覺更適合新項(xiàng)目，我們的目前的項(xiàng)目使用的都是 css modules，引入進(jìn)來以后，是不是只能新頁面才能用，畢竟老頁面一堆 css modules 文件不可能一點(diǎn)點(diǎn)去改，本來就不熟悉，改起來更費(fèi)時間了

但后面還是還是接入了，接入以后發(fā)現(xiàn)上面的提到的勸退點(diǎn)還是不值一提的，對于問題1，實(shí)際使用的時候配合上 vscode 插件陳本還是比較低的，而且 tailwind css 的 命名還是有一定規(guī)律的，比如寬度，基本上就是 w-[value/4px]，對于問題 2，因?yàn)樽约汉竺鎸懥艘粋€工具，處理起來也是比較快捷的。

我們大倉的6個項(xiàng)目都已經(jīng)從 css modules 轉(zhuǎn)成 tailwind css 了，其中3個是我操作的，但整體已經(jīng)是流水線的方式了，所以切換成 tailwind css 過程還是很簡單的，我大概分享下自己切換 tailwind css 的過程

過程

準(zhǔn)備工作

請一定要安裝 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss&ssr=false#overview這個 vscode 插件，它會讀取你的 tailwind css 的配置，代碼提示和查看樣式規(guī)則上能帶來很大的幫助：

安裝

https://tailwindcss.com/docs/installation 官方文檔介紹的非常詳細(xì)了，以 create-react-app 為例：

第一步，安裝 tailwind，生成相對應(yīng)的配置文件：

npm install -D tailwindcss
// yarn add tailwindcss -D
npx tailwindcss init


文件變化，主要是生成一份配置文件：

配置

關(guān)于配置的說明可以直接看官方的文檔 https://tailwindcss.com/docs/configuration#content，對于我們這種從 css modules 切換 tailwind css 的項(xiàng)目，有些配置需要著重關(guān)注一下：

important, 它可以是boolean類型或者string類型，默認(rèn)是false，對于新項(xiàng)目我們一般直接設(shè)置成true，設(shè)置成true，對于樣式規(guī)則，會加上!important把級別提到最大，如果是字符串，就相當(dāng)于一個選擇符，如果設(shè)成important: '#app'，那么對應(yīng)的 tailwind class 會變成#app .tailwind-class: { /** */ }這種形式。

content就是文件匹配規(guī)則一般就是設(shè)置成['./src/**/*.{ts,tsx}', './src/**/*.{css,scss}']的形式。

corePlugins，可以選擇對 tailwind 的核心插件配置禁用的規(guī)則，對于我們這種項(xiàng)目來說，css normalize 一般是已經(jīng)做好了的，所以一定要把它的preflight插件禁掉，不然會出現(xiàn)一些樣式問題

corePlugins: {
preflight: false,
},


theme，主題這個配置也是非常重要，你可以做些自定義的 class，這個后面會說，但一般來說，還是需要改下它的font-size，這樣會讓我們后面書寫字體大小的時候舒服很多，因?yàn)?tailwind css 的字體大小是大小和行高組合起來的，這個一般都接受不了：

你需要加上這個配置，排除掉行高的影響：

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',
},
},


整個的配置：

/** @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 問題。

做完這些，就可以測試一下是否生效了，找一個頁面，加上 <div className="flex"></div>，執(zhí)行yarn start試試是否生效：

當(dāng)你看到這個就說明配置都生效了，這樣就可以開心的寫 tailwind css 了。

開發(fā)體驗(yàn)

但是實(shí)際使用的時候，可能會碰到一些問題，比如這個長度沒找到相對應(yīng)的，這個顏色有沒有，這個官方文檔也詳細(xì)說明了 https://tailwindcss.com/docs/adding-custom-styles。比如我有個 color: #666;就是沒有相對應(yīng)的 tailwind class，只需要text-[#666]就好了，或者網(wǎng)頁有個主題顏色，這個顏色在很多地方用到了，但是我不想一直text-[xxx]這樣，只需要：

theme: {
extend: {
textColor: {
666: '#666',
},
backgroundColor: {
666: '#666',
},
},
},


就可以直接使用 text-666和bg-666的形式了：

處理老代碼(針對 JSX/TSX 文件，可選項(xiàng))

這一步是可選項(xiàng)，你可以使用 https://github.com/shiyangzhaoa/css-modules-to-tailwind 來對老代碼進(jìn)行轉(zhuǎn)換，嘗試執(zhí)行(執(zhí)行前記得提交代碼，這個命令會直接修改你的代碼)：

npx css-modules-to-tailwind src/**/*.tsx -f
// npx css-modules-to-tailwind src/**/*.jsx -f


對于我的測試項(xiàng)目，可以看到有 48 文件得到修改：

查看文件變化，對于 css modules 文件：

對于 tsx/jsx 文件：

啟動項(xiàng)目查看變化：

樣式?jīng)]有變化，class 也轉(zhuǎn)換成功了，完美（bushi

總結(jié)

綜上所述，接入 tailwind css 的成本非常低，對于我來說，使用起來也是非常流暢，尤其你稍微熟悉以后，開發(fā)起來速度也是嗖嗖的，強(qiáng)烈推薦～

– EOF –

Tailwind CSS 的開發(fā)團(tuán)隊(duì)在開源版的基礎(chǔ)上，設(shè)計(jì)了官方的組件庫，包含有 500 多個精心設(shè)計(jì)的組件和 10 套網(wǎng)頁模板。官網(wǎng)單獨(dú)購買的話，要快 300 美金，折合接近 2500 塊。

但是如果大家一起共享的話，只需要不到 50 塊就可以享受同官網(wǎng)版本相同的服務(wù)了。有興趣的小伙伴可以前往淘寶詳情頁了解。

推薦閱讀 點(diǎn)擊標(biāo)題可跳轉(zhuǎn)

1、Python 項(xiàng)目工程化最佳實(shí)踐

2、Python 可以比 C 還要快！

3、streamlit，一個超強(qiáng)的 Python 庫

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)鍵詞「書單02」，領(lǐng)取進(jìn)擊的Grey整理的 10 本 Python 入門書的電子版

告訴你更多細(xì)節(jié)干貨

歡迎圍觀我的朋友圈

??每天更新所想所悟