「究竟該如何將 Tailwind CSS 導到 Vue3 與 React？」

我們針對使用 CSS 框架的人進行問卷調查，發現許多人都不知道該如何將最新框架 Tailwind CSS，與 Vue3、React 配置。

所以我們特別整理的這篇文章，幫助大家理解配置的過程。

本文由 【五分鐘學前端】從零配置TailwindCSS到Vue3與React的前端專案！ 授權使用。

Vue3

首先我們來看看 Vue3 的部分，如果還沒有建立專案的人可以用以下指令安裝！

首先打開終端機，用 CD指令進入到你想要建立專案的目錄底下，輸入底下指令：

npm init @vitejs/app 你取的名字

運行指令後，會出現這樣的畫面，這時我們選擇 Vue：

接下來，會讓你選擇開發的語言，按照各位喜好選擇就好，這裡選擇 JS：

選擇完後，就會開始建立 Vue 專案，建立完成後輸入以下指令進到剛建立好的專案：

cd 你的專案名稱

之後運行：

npm i

你的 Vue 專案就建立完成囉，之後運行啟動指令到瀏覽器看看！

npm run dev

打開瀏覽器，輸入你的終端機顯示的網址，例如我的是http://localhost:3000/。

接下來就讓我們來安裝TailwindCSS！

安裝 Tailwind CSS 到 Vue3 專案裡

首先，我們來安裝這三個東西：

• tailwindcss@latest：最新版Tailwind CSS。
• postcss@latest：postcss是個幫助你編譯CSS的工具。
• autoprefixer@latest：搭配postcss使用的插件，編譯CSS的時候會幫你自動加上各瀏覽器的前綴，例如：-webkit等等

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

安裝完後，我們需要生出 Tailwind CSS 的配置檔案到目錄底下，所以運行以下指令：

npx tailwindcss init -p

這時候因為 -p，所以我們會得到兩種檔案，分別是 tailwind.config.js 跟 postcss.config.js：

• tailwind.config.js：負責配置tailwind的設定。
• postcss.config.js：負責配置postcss的設定。

然後我們進入到tailwind.config.js，做以下的修改：

// tailwind.config.js
  module.exports = {
    // 這裡刪掉
-   purge: [], 
    // 加入這行
+   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], 
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

最後，在/src目錄底下，新增 index.css 檔案，然後複製以下內容：

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

這裡的用意是將 Tailwind CSS 的樣式引入到專案裡：

然後，我們把 index.css 引入到根目錄 main.js 底下：

最後，重新運行 npm run dev，就大功告成啦！

React

再來我們來看看React的專案該如何引入 Tailwind CSS！

首先我們用 Create React App 來建立我們的React專案。

一樣打開終端機，用 CD 指令進入到你想要建立專案的目錄底下，輸入底下指令：

npx create-react-app 你的專案名稱

之後進入到專案，運行：

cd 你的專案名稱npm i 

再來我們運行啟動網站的指令，就可以開啟網站囉：

npm run start

安裝TailwindCSS到React專案裡

首先，我們來安裝這三個東西：

• tailwindcss@npm:@tailwindcss/postcss7-compat：因為Create React App還沒支援postcss 8(Tailwind要求的版本)，所以需要這個兼容版本。
• postcss@ ^ 7：postcss是個幫助你編譯CSS的工具。
• autoprefixer@ ^ 9：搭配postcss使用的插件，編譯CSS的時候會幫你自動加上各瀏覽器的前綴，例如：-webkit等等

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

再來，我們安裝 craco，這個包的名稱來自於以下的縮寫：

Create React App Configuration Override

npm install @craco/craco

簡單來說就是，如果要配置用 Create React App 建立的 React 專案很麻煩，所以有了這個包來方便你配置你的專案！

安裝完後我們進入到 package.json 檔案，修改以下的內容：

{
    // ...
    "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 檔案，讓我們的 React 專案引入 tailwind 跟 postcss：

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

再來，運行這個指令建立 tailwind css 的 config：

npx tailwindcss init

然後我們進入到 tailwind.config.js，做以下的修改：

// 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: [],
  }

最後，進入到 src/index.css 把原本的內容用以下的內容覆蓋掉，然後確保 src/index.js 有引入 index.css 檔案：

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

重新運行 npm run start，這樣就大功告成啦！

結語

以上就是從零配置TailwindCSS到Vue3與React的前端專案的教學，這篇文章主要是想用中文帶大家引入TailwindCSS到這兩種前端專案裡。

希望這篇文章能幫助到大家配置TailwindCSS！

布魯斯的 Tailwind CSS + Bootstrap 5 框架雙刀流

還是覺得有些困難？現任 Tiktok 工程師 布魯斯前端-Tiktok工程師帶你入門前端 ，無痛導入框架，更結合過去專案經驗，帶你有效規劃 UI，繞過開發痛點！​

帶你掌握 2 種熱門框架，開發困境通通有解​➡️ 一網打盡組合包

▪️困境 1：不了解 Ｗebpack，不知道如何將框架導入前端專案​
▪️解法：熟悉 Webpack、postcss 等工具，手把手帶你配置 Webpack 的前端專案​　​

▪️困境 2：想自訂義顏色等樣式，但不熟悉 Bootstrap，只能加上自己定義的 class 名稱去覆蓋樣式​
▪️解法：學習 sass 以及操作 Bootstrap 已經寫好的 sass 檔案，來自定義自己想要的樣式。更完全掌握「Layout 網頁排版」、「Component 網頁組件」等核心概念​　​

▪️困境 3：Tailwind CSS 和以往語意式的 class 使用方式不一樣，不太了解它的設計架構​
▪️解法：熟悉 Utility 的使用，如「版面配置」、「動畫與變形」等必備技術​

單堂課滿足個別需求

布魯斯的 Bootstrap 5 開發秘技｜極速開發電商網站 UI

布魯斯的 Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI