【總結(jié)】1832- 一步步從 CSS Modules 切換到 Tailwind CSS
作者：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í)候其實(shí)就想接入 tailwind css 嘗試了，原因無非就是那幾樣，原子化，design token，更主要的是終于不用再為 class 的命名去傷腦經(jīng)了，但勸退我使用 tailwind css 的幾個(gè)因素：
- 新的東西，又帶來新的學(xué)習(xí)成本
- 感覺更適合新項(xiàng)目，我們的目前的項(xiàng)目使用的都是 css modules，引入進(jìn)來以后，是不是只能新頁(yè)面才能用，畢竟老頁(yè)面一堆 css modules 文件不可能一點(diǎn)點(diǎn)去改，本來就不熟悉，改起來更費(fèi)時(shí)間了
但后面還是還是接入了，接入以后發(fā)現(xiàn)上面的提到的勸退點(diǎn)還是不值一提的，對(duì)于問題1，實(shí)際使用的時(shí)候配合上 vscode 插件陳本還是比較低的，而且 tailwind css 的 命名還是有一定規(guī)律的，比如寬度，基本上就是 w-[value/4px]，對(duì)于問題 2，因?yàn)樽约汉竺鎸懥艘粋€(gè)工具，處理起來也是比較快捷的。
我們大倉(cāng)的6個(gè)項(xiàng)目都已經(jīng)從 css modules 轉(zhuǎn)成 tailwind css 了，其中3個(gè)是我操作的，但整體已經(jīng)是流水線的方式了，所以切換成 tailwind css 過程還是很簡(jiǎn)單的，我大概分享下自己切換 tailwind css 的過程
過程準(zhǔn)備工作
請(qǐng)一定要安裝 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss&ssr=false#overview這個(gè) vscode 插件，它會(huì)讀取你的 tailwind css 的配置，代碼提示和查看樣式規(guī)則上能帶來很大的幫助：
安裝
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)于配置的說明可以直接看官方的文檔 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)目來說，css normalize 一般是已經(jīng)做好了的，所以一定要把它的preflight插件禁掉，不然會(huì)出現(xiàn)一些樣式問題corePlugins: {
preflight: false,
}, -
theme，主題這個(gè)配置也是非常重要，你可以做些自定義的 class，這個(gè)后面會(huì)說，但一般來說，還是需要改下它的font-size，這樣會(huì)讓我們后面書寫字體大小的時(shí)候舒服很多，因?yàn)?tailwind css 的字體大小是大小和行高組合起來的，這個(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 問題。
做完這些，就可以測(cè)試一下是否生效了，找一個(gè)頁(yè)面，加上 <div className="flex"></div>，執(zhí)行 yarn start 試試是否生效：
當(dāng)你看到這個(gè)就說明配置都生效了，這樣就可以開心的寫 tailwind css 了。
開發(fā)體驗(yàn)
但是實(shí)際使用的時(shí)候，可能會(huì)碰到一些問題，比如這個(gè)長(zhǎng)度沒找到相對(duì)應(yīng)的，這個(gè)顏色有沒有，這個(gè)官方文檔也詳細(xì)說明了 https://tailwindcss.com/docs/adding-custom-styles。比如我有個(gè) color: #666; 就是沒有相對(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 來對(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ì)于我來說，使用起來也是非常流暢，尤其你稍微熟悉以后，開發(fā)起來速度也是嗖嗖的，強(qiáng)烈推薦～
往期回顧
#
如何使用 TypeScript 開發(fā) React 函數(shù)式組件？
# #6 個(gè) Vue3 開發(fā)必備的 VSCode 插件
# #6 個(gè)你必須明白 Vue3 的 ref 和 reactive 問題
# #試著換個(gè)角度理解低代碼平臺(tái)設(shè)計(jì)的本質(zhì)
回復(fù)“加群”，一起學(xué)習(xí)進(jìn)步