作者：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)來以后，是不是只能新頁面才能用，畢竟老頁面一堆 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è)工具，處理起來也是比較快捷的。

我們大倉的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è)頁面，加上 <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)頁有個(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)烈推薦～

一步步從 CSS Modules 切換到 Tailwind CSS

關(guān)于 Tailwind CSS

過程

準(zhǔn)備工作

安裝

配置

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

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

總結(jié)