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

如果我的分享對你有幫助，請關注我，一起向上進擊。

作者：SSSS

https://juejin.cn/post/7237425753612288055

關于 Tailwind css

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

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

1. 新的東西，又帶來新的學習成本

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

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

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

過程

準備工作

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

安裝

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

第一步，安裝 tailwind，生成相對應的配置文件：

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


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

配置

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

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

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

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

corePlugins: {
preflight: false,
},


theme，主題這個配置也是非常重要，你可以做些自定義的 class，這個后面會說，但一般來說，還是需要改下它的font-size，這樣會讓我們后面書寫字體大小的時候舒服很多，因為 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試試是否生效：

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

開發(fā)體驗

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

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


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

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

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

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


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

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

對于 tsx/jsx 文件：

啟動項目查看變化：

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

總結(jié)

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

– EOF –

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

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

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

1、Python 項目工程化最佳實踐

2、Python 可以比 C 還要快！

3、streamlit，一個超強的 Python 庫

4、豆瓣8.9分的C 經(jīng)典之作，免費送！

5、Python 3.12 版本有什么變化？

回復關鍵詞「 pybook03」，領取進擊的Grey與小伙伴一起翻譯的《Think Python 2e》電子版

回復關鍵詞「書單02」，領取進擊的Grey整理的 10 本 Python 入門書的電子版

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

歡迎圍觀我的朋友圈

??每天更新所想所悟