React 和 Vite 環境下 TailwindCSS 的配置指南

1. 安裝tailwindcss

npm install -D tailwindcss postcss autoprefixer

2. 生成tailwindcss 配置檔案

npx tailwind init -p

3. tailwind.config.js 配置

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

4. vite.config.js 配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss"
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 新增 css 配置
  css: {
    postcss: {
      plugins: [tailwindcss()],
    }
  }
})

5. 引入 tailwind

在 src/index.css 中加入如下配置：

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

6. 檢視是否配置成功

function App() {
  return (
    <main className="bg-green-500 text-slate-300 text-center w-[100px] h-[100px]">
      Hello World
    </main>
  )
}

export default App