建立 React + Tailwind CSS 環境

tags: Web React Tailwind CSS 環境設定

category: Front-End

description: 建立 React + Tailwind CSS 環境

created_at: 2021/08/05 19:00:00

updated_at: 2022/07/29 12:00:00

2022.07.29更

今天看 GA 看到最近這篇有瀏覽量，想說 tailwindCSS 版本有大更(2 => 3)，不見得會再碰到下面的問題，所以來補充一下訊息。

然後因為我自己有寫一個 npx 指令去幫忙建置環境，所以其實也不需要像這篇文章手動建 tailwindCSS 環境了。

如果要快速幫你裝好像是 Eslint、Prettier、Tailwindcss 之類的環境，可以考慮我做的 cmd: https://github.com/LaiJunBin/lai-cmd

用法很簡單，如果你只要 tailwindCSS 不要其他東西，在 react 專案只要下

$ npx lai-cmd init react-tailwindcss

Vue3 專案也支援:

$ npx lai-cmd init vue-tailwindcss

下方內容可能已過時，有興趣再往下閱讀

事前準備

• 裝好 Node.js

前言

今天在建立 react 的 tailwindcss 環境的時候前面一切順利，官方的文件非常詳細，但就在最後一關碰到了小問題。

就是在 jit 模式下修改沒有 hot reload ， 如果每次要改一點重啟 Server 非常浪費時間且沒有效率，所以就稍微紀錄一下。

基本上前半段應該都跟官方不會差太多，所以我就偷懶把官方的code貼過來吧

1. 建立 react app 並切進去目錄

   $ npx create-react-app my-project

   $ cd my-project

2. 透過 npm 安裝 tailwindcss 跟一些相關套件

   $ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3. 安裝 craco (這可以擴展 react 的一些設定檔)

   $ npm install @craco/craco

4. 修改 package.json

   {
    // ...
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        // ...
    },
   }

5. 在根目錄建立 craco.config.js

   module.exports = {
   style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
   },
   }

6. 產生 tailwindcss 設定檔

   $ npx tailwindcss-cli@latest init

7. 修改 tailwind.config.js，讓他只產出有用到的 class

   module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    // ...
   }

8. 設定 src/index.css

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

差不多到這邊就是我們需要用到官方的範圍，如果以後有更新，可以再去看他的官方文件做安裝。

打開 jit 模式

1. 修改 tailwind.config.js

   module.exports = {
    // ...
    mode: 'jit',
    // ...
   }

2. 安裝 concurrently 讓你可以同時啟動多個指令

   $ npm install -D concurrently

3. 修改 package.json

   {
    // ...
    "scripts": {
        // ...
        "watch:style": "npx tailwindcss src/index.css -o src/tailwind.css --watch",
        "dev": "concurrently \"npm run watch:style\" \"npm run start\""
    },
    // ...
   }

上面的 object key 跟 檔案名稱可以照自己的喜好設定

4. 在 src/index.js 引入編譯完的 CSS

   // ...
   import './tailwind.css';
   // ...

5. 啟動 Server

   $ npm run dev

到這邊就大功告成了。