React/Vue/Svelte 前端項目中開始使用TailwindCSS

背景

TailwindCSS 近年來在前端圈非常流行，它擺脫了原有的CSS限制，以靈活實用為賣點，用戶通過各種class組合即可構建出漂亮的用戶界面。對于初學者而言，可能需要一些上手成本，一旦掌握實用技巧后，TailwindCSS會是我們開發工作中的出鞘利刃。

筆者參與開發的項目幾乎全部支持TailwindCSS來完成需求開發，期間碰到過TailwindCSS相關的各種問題。于是想著把TailwindCSS的使用技巧和踩坑經驗記錄下來，分享給有需要的同學。

目標

初學者快速入門 TailwindCSS；
TailwindCSS 使用技巧和提效工具；
高效的問題定位和排查；
TailwindCSS 工作原理；

使用步驟

1. 安裝 TailwindCSS & PostCSS

npm install -D tailwindcss tailwindcss postcss autoprefixer

2. 初始化 TailwindCSS 配置文件

npx tailwindcss init

3. 配置 TailwindCSS 掃描范圍

那么重點來了!!!
對于不同前端技術棧的項目，比如 React、Vue、Svelte、Angular等等，我們只需要配置對應的文件掃描范圍即可。其他的配置步驟都是相同的。

React："./src/**/*.{js,jsx,ts,tsx}"
Vue: "./src/**/*.{vue,js,ts,jsx,tsx}”
Svelte: "./src/**/*.{svelte,js,ts,jsx,tsx}"

/** @type {import('tailwindcss').Config} */
module.exports = {// 加載對應**構建工具**和**技術棧**的文件即可**content: ["./src/**/*.{html,js}"],**theme: {extend: {},},plugins: [],
}

如果你在html模板中也使用了 TailwindCSS 的樣式類，那么 content 配置數組也需要添加 html 文件路徑。

4. 配置 PostCSS

如果項目中之前已經使用了 PostCSS 插件，我們只需要在 postcss.config.js中添加 tailwindcss相關的配置；如果項目之前沒有使用 PostCSS 插件，那我們需要在項目根路徑創建文件postcss.config.js，并添加如下配置；

// postcss.config.jsmodule.exports = {plugins: {tailwindcss: {},autoprefixer: {},}
}

5. 構建工具集成 PostCSS插件（讓PostCSS插件開始工作）

Rspack

/*** @type {import('@rspack/cli').Configuration}*/module.exports = {module: {rules: [{test: /\.css$/i,use: [{loader: "postcss-loader",},],type: "css",},],}
};

webpack

module.exports = {module: {rules: [{test: /\.css$/i,use: ["style-loader","css-loader",{loader: "postcss-loader"},],},],},
};

6. 項目全局CSS文件中添加 TailwinCSS 依賴內容

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

至此，我們完成了使用 TailwindCSS 的所有配置，接下來是如何使用 TailwindCSS 美化頁面。

在此之前我們需要啟動或者重啟本地開發服務器

npm run dev

使用效果

使用TailwindCSS 畫一個正方形

<div className='border border-lime-600 w-32 h-32'></div>

TailwindCSS 畫正方形

總結

TailwindCSS 的開始步驟看著比較多，但是真正按照步驟動手啟動可能只需要幾分鐘，更多的內容是我想跟大家分享具體的作用，也方便大家能夠對 TailwindCSS 有個較為清晰的理解。

更多的 TailwindCSS 相關的內容分享，前往 TailwindCSS 使用指南