在 Create React App 安裝 Tailwind CSS

建立專案

首先，建立一個新的 Create React App，如果你還沒有一個已經設定好的專案。最常見的方式是使用 Create React App:

npx create-react-app my-project
cd my-project

設定 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 以上版本。

使用 npm 安裝 Tailwind

使用 npm 安裝 Tailwind 和它需要的依賴套件 (peer-dependencies)：

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

Create React App 尚未支援 PostCSS 8 ，所以你需要安裝 Tailwind CSS v2.0 PostCSS 7 相容版本，如我們在上方顯示的。

安裝並設定 CRACO

因為 Create React App 不能複寫 PostCSS 設定，所以我們需要安裝 CRACO 來設定 Tailwind：

npm install @craco/craco

安裝好了之後，修改 package.json 檔案中的 scripts 以使用 craco 而不是 react-scripts，除了 eject 以外的指令都要修改：

  {
    // ...
    "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"
    },
  }

接下來在專案的根目錄建立 craco.config.js，然後新增 tailwindcss 和 autoprefixer 當作 PostCSS 的插件：

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

如果你打算使用別的 PostCSS 插件，你應該要閱讀我們在 using PostCSS as your preprocessor 的文件獲得更完整的資訊，來找出最合適的方式跟 Tailwind 一同運作。

建立設定檔案 file

然後產生 tailwind.config.js 檔案：

npx tailwindcss-cli@latest init

這會在專案的根目錄建立一個基本的 tailwind.config.js 檔案：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

想了解更多關於 Tailwind 的設定可以到配置文件。

讓 Tailwind 在生產環境建置時移除不必要的樣式

在你的 tailwind.config.js 檔案設定 purge 選項指定路徑到你所有的 components，讓 Tailwind 可以在生產環境建置時清除沒有使用的樣式：

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

閱讀我們在優化生產環境的說明來獲得更多關於「清除不必要樣式以增進效能」的資訊。

在你的 CSS 中使用 Tailwind

打開 Create React App 預先為你建立好的 ./src/index.css 檔案

使用 @tailwind 指令來引用 Tailwind 的 base、components 和 utilities 樣式，並且取代原本檔案的內容：

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 會在建置時將這些指令替換成你配置系統時所對應的樣式內容。

閱讀我們的增加基底樣式、提取成元件和增加新功能文件以使用 Tailwind 為你自定義的 CSS 做最好的擴充。

Finally, ensure your CSS file is being imported in your ./src/index.js file: 最後，確保你的 CSS 檔案有被 ./src/index.js 檔案所引用 (import)：

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

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

  // ...

你已經完成了！現在當你執行 npm run start，Tailwind CSS 將會在你的 Create React App 專案中運行。

接著來了解功能優先流程 →