CRA with Tailwind

Reference

Install

因為 CRA 沒有提供調整 PostCSS config 的關係，必須另外安裝 @craco/craco package 處理：

@craco/craco 中用到的 react-scripts 為 peerDependencies。

yarn add @craco/craco

同時調整 scripts 的部分：

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

之後安裝 Tailwind：

截至 react-scripts@4.0.3 仍未支援 postcss@8.0.0，而無法使用 Tailwind V2，因此使用 package tailwindcss@npm:@tailwindcss/postcss7-compat。

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

然後創建 root/craco.config.js 調整 PostCSS config：

從文件提供的範例來看， root/craco.config.js 很有可能只是單純覆蓋 CRA 預設的設定值。

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

最後創建 root/tailwind.config.js

可以透過 npx tailwindcss init 自動創建

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

Usage

在專案的 root css 檔案中加入以下設定（通常為 CRA 中的 root/index.css）：

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

可以在 root/tailwind.config.js 中設定 purge 移除沒有用到的 css。

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