首页 > 网络编程 > JavaScript > javascript类库 > vue.js > React和Vite环境下TailwindCSS的配置

React和Vite环境下TailwindCSS的配置详解

2026-06-30 10:41:24 作者：西门飘雪01

本文详细介绍了如何在Vite项目中集成Tail尾windCSS,包括生成配置文件、配置`tailwind.config.js`、`vite.config.js`,以及在`src/index.css`中引入样式,助您快速搭建优雅的CSS框架

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。