Tailwind 安裝 React 篇

最近幾年火速竄紅的 CSS 框架 Tailwind 也是蠻多前端工程師開始使用，於是就有了本篇跟風仔的安裝篇XD

環境版本介紹

本篇使用的是 Create-React-App 來建立環境，並且將會透過 NPM 來安裝 Tailwind。

React 版本：17.0.2 Node.js 版本：14.16 （官方建議版本12.13或以上） Tailwind 版本：2.1.4

安裝流程

請在終端機輸入： $ npx create-react-app 專案名稱，安裝完後再 $ cd 進入專案資料夾中。接著就要開始安裝 Tailwind 了，請輸入：

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

這時候碰到一個問題，我的終端機跳出一個訊息：no matches found: postcss@^7

上網查了一下解法，如果跟我一樣遇到這個問題的話，請輸入：

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

安裝 CRACO：

$ npm install @craco/craco

接著請打開編輯器，並將 package.json 中的 scripts 物件中的部份替換成:

"scripts": {
    // "start": "react-scripts start",
    // "build": "react-scripts build",
    // "test": "react-scripts test",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

在終端機輸入： $ touch craco.config.js，會在專案的根目錄產生一個檔案，並在檔案中手動加上：

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



在終端機輸入：$ npx tailwindcss-cli@latest init，成功的話會自動生成一個 tailwind.config.js 在 根目錄中。
然後修改一下該檔案：


module.exports = {
  // purge: [],  將原本的 purge 替換成以下
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}



接著打開 /src 目錄中的 index.css，並將其內容替換成：


```css
@tailwind base;
@tailwind components;
@tailwind utilities;

最後一個步驟，請確保 index.css 有被引入到 /src/index.js 中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from;

執行 $ npm run start，，畫面有顯示就代表恭喜你，可以準備進入 Tailwind 的坑了XD