使用 Vite 安裝 Tailwind CSS - Tailwind CSS 框架

我們正在招募設計工程師 + 軟體工程師

安裝
使用 Vite 安裝 Tailwind CSS

建立專案
如果您尚未設定新的 Vite 專案，請先建立一個。最常見的方法是使用建立 Vite。
終端機
```
npm create vite@latest my-project -- --template reactcd my-project
```
安裝 Tailwind CSS
安裝 tailwindcss 及其對等相依項，然後產生您的 tailwind.config.js 和 postcss.config.js 檔案。
終端機
```
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
```

設定範本路徑

在 tailwind.config.js 檔案中新增所有範本檔案的路徑。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 CSS 中新增 Tailwind 指令
在 ./src/index.css 檔案中，針對 Tailwind 的每個層級新增 @tailwind 指令。
index.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
開始建置流程
使用 npm run dev 執行建置流程。
終端機
```
npm run dev
```

開始在專案中使用 Tailwind

開始使用 Tailwind 的實用程式類別來設定內容樣式。

App.jsx

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}