關于 Tailwind CSS

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

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

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

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

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

過程

準備工作

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

安裝

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 的項目，有些配置需要著重關注一下：

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

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

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

   corePlugins: {
    preflight: false,
    },
   

4. 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>，執行 yarn start 試試是否生效：

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

開發體驗

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

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

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

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

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

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

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

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

對于 tsx/jsx 文件：

啟動項目查看變化：

樣式沒有變化，class 也轉換成功了，完美（bushi

總結

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