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