在 React 專案中輕鬆使用 TailwindCSS

在 React 開發中，CSS 是一個重要的部分，它負責定義您的樣式和外觀。然而，編寫大量的 CSS 代碼非常耗時，而且通常需要大量的重複代碼。這就是 TailwindCSS 出現的原因。它是一個樣式框架，可以讓快速且簡單地創建複雜的樣式，同時可以減少重複代碼。

而下面將會介紹如何使用 React 時安裝並引入 TailwindCSS。

或是直接去看官方網站是最快的，這只是一個筆記

官方網站教學：Install Tailwind CSS with Create React App - Tailwind CSS

流程

1. 創建一個新的 React 專案：

$ npx create-react-app <app-name>
$ cd <app-name>

2. 安裝 TailwindCSS 和相關的套件：

$ npm install -D tailwindcss postcss-cli autoprefixer

3. 初始化 TailwindCSS 配置檔案 tailwind.config.js：

$ npx tailwindcss init

4. 配置 postcss.config.js 檔案：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

以上告訴 PostCSS (使用 postcss-cli ) 在編譯時，要使用 tailwindcss 和 autoprefixer。

5. 配置 tailwind.config.js 檔案：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. 在 index.css 檔案中引入 TailwindCSS：

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

Q&A

Q： npm install -D 的 -D 什麼意思？

A： -D 是 --save-dev 的簡寫，表示要安裝該套件作為開發依賴(dependency)，而不是生產環境的依賴。這意味著該套件只會在開發期間使用，而不會在最終的產品或應用程式中使用。在這種情況下，安裝 TailwindCSS 是為了在開發期間使用它來設計和開發樣式，而不是在最終產品中使用它。由於 TailwindCSS 只用於開發，因此在部署應用程式時不需要在生產環境中安裝它，這可以減小應用程式的大小和加快載入速度。

Q： 我可以把 -D 從 npm install -D 拿掉嗎？

A： 不建議在使用 TailwindCSS 的 React 專案中刪除 -D。-D 是指將安裝的套件作為開發依賴項來安裝，這將使應用程序能夠使用這些套件，但不會將它們打包到應用程序的產品版本中。這樣可以節省應用程序大小，而且在生產環境中不需要使用這些套件。

當準備發布應用程序時，應該運行以下命令：

npm run build

這將建立一個生產就緒的版本，其中包括將應用程序與依賴項一起打包。因此建議保留 -D 選項，以確保應用程序能夠使用這些套件。

Q： 為什麼常常看到別人的 tailwind.config.js 檔案配置中，content 屬性有包含 ./public/index.html？

A： tailwind.config.js 的 content 屬性用於告訴 TailwindCSS 於哪些檔案中查找樣式規則。在 React 項目中，通常所有樣式規則都在 JavaScript 或 TypeScript 檔案中，因此可以只指定這些檔案進行查找樣式。

但如果在某種情況下，像是使用了基於 HTML 的模板引擎來生成 HTML 檔案，樣式規則可能會在 HTML 中定義。若發生這種情況時，則需要在 content 屬性中加入 HTML 檔案所在的路徑，以便 TailwindCSS 可以查找規則並編譯至最終的 CSS 檔案內。

因此，在 React 項目中，若樣式規則都在 JavaScript 或 TypeScript 定義的，就可以將 content 屬性設置為：

content: ['./src/**/*.{js,jsx,ts,tsx}']

但是，若樣式規則在 HTML 檔內定義，就需要將 content 屬性設置為：

content: [
  './src/**/*.{js,jsx,ts,tsx}',
  './public/index.html',
]

這樣 TailwindCSS 就可以找到並編譯所有的樣式規則，無論在 JavaScript 或 TypeScript 中定義的，還是在 HTML 檔案內定義的。