學習資源

從零開始配置 Vue3 / React + Tailwind CSS

「究竟該如何將 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:不了解 Webpack,不知道如何將框架導入前端專案​
▪️解法:熟悉 Webpack、postcss 等工具,手把手帶你配置 Webpack 的前端專案​ ​

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

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

單堂課滿足個別需求

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

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

Hi 找我嗎?追蹤訂閱HiSKIO

  • HiSKIO 嗨程式技能: 科技資訊文章、實用工具分享、新課程優惠領取
  • Codefree:喝一杯咖啡,輕鬆學程式!
  • HiSKIO LINE:叮咚!掌握最新資訊與優惠,現在就到 LINE 領200抵用券!
  • HiSKIO YouTube:免費實用課程、工程師經驗分享
  • 程式丼起來:不想一個人孤單寫 code ? 立即加入話題圈吧 !
Facebook Comments