Tailwind CSS 初始化設置指南

1. install Tailwind CSS

# npm
npm install -D tailwindcss postcss autoprefixer

# pnpm
pnpm add -D tailwindcss postcss autoprefixer

創建/初始化postcss.config.js和tailwind.config.js

npx tailwindcss init -p

2. 配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */

const content = [
  "./index.html",
  "./src/**/*.{js,jsx}",
]
const plugins = []
const theme = { extend: {} }
export { content, plugins, theme }

3. 將 Tailwind 指令添加到 CSS 文件中

在CSS 文件中（通常是 src/index.css 或 src/styles/main.css），添加指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

在main.js或main.jsx中匯入

import './assets/index.css'

4. 在 HTML 中開始使用 Tailwind

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>