前言
這篇文章大多的內容都是來自於TailwindCSS官網的內容，比較適合習慣看英文的朋友們，但如果想看看中文版的，就繼續看下去吧！
然後工商一下～最近我跟HISKIO合作開了這堂課：
「布魯斯的 Tailwind CSS + Bootstrap 5 框架雙刀流」
願意支持的話，可以讓我斂個財，然後因為6/4是優惠到期日，所以到時候會漲價，然後用這個連結買，我拿到的分潤比較高，感謝ＸＤ
這篇文章分別會教大家如何導入TailwindCSS到Vue3與React的專案。
就讓我們開始吧！
Vue3
首先我們來看看Vue3的部分，如果還沒有建立專案的人可以用以下指令安裝！
首先打開終端機，用 CD指令進入到你想要建立專案的目錄底下，輸入底下指令：
npm init @vitejs/app 你取的名字運行指令後，會出現這樣的畫面，這時我們選擇Vue：
接下來，會讓你選擇開發的語言，按照各位喜好選擇就好，這裡選擇JS：
選擇完後，就會開始建立Vue專案，建立完成後輸入以下指令進到剛建立好的專案：
cd 你的專案名稱之後運行：
npm i你的Vue專案就建立完成囉，之後運行啟動指令到瀏覽器看看！
npm run dev
打開瀏覽器，輸入你的終端機顯示的網址，例如我的是http://localhost:3000/。
接下來就讓我們來安裝TailwindCSS！
安裝TailwindCSS到Vue3專案裡
首先，我們來安裝這三個東西：
- tailwindcss@latest：最新版TailwindCSS。
- postcss@latest：postcss是個幫助你編譯CSS的工具。
- autoprefixer@latest：搭配postcss使用的插件，編譯CSS的時候會幫你自動加上各瀏覽器的前綴，例如：-webkit等等
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest安裝完後，我們需要生出TailwindCSS的配置檔案到目錄底下，所以運行以下指令：
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;這裡的用意是將TailwindCSS的樣式引入到專案裡：
然後，我們把index.css引入到根目錄main.js底下：
最後，重新運行npm run dev，就大功告成啦！
React
再來我們來看看React的專案該如何引入TailwindCSS！
首先我們用 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'),
],
},
},
}
再來，運行這個指令建立tailwindcss的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！
想持續關注我的話
- 去Medium追蹤給他按下去～！
- 去Facebook粉專按按讚～！
- 去Youtube頻道訂閱，每週三都直播聊聊大家想問的問題～！
- 加入我創的Line社群，群組目前有2000多人，可以一起進來交流分享經驗跟技術。
- Line社群點我加入：https://reurl.cc/V3WjGZ
