Tailwind Css V4 在vite安装流程

依赖安装

pnpm add -D tailwindcss @tailwindcss/vite

Vite 配置

在 Vite 配置文件 vite.config.ts 中添加 @tailwindcss/vite 插件

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

导入css

一定要把下面代码 导入到.css后缀的文件中,因为 Tailwind 指令（@import/@theme）仅出现在 .css 文件中，​​不可嵌套在 Less/Sass 中

/* theme.css */
@import "tailwindcss";

项目全局引入(main.tsx)

import { createRoot } from "react-dom/client";
import "./styles/theme.css";

createRoot(document.getElementById("root")!).render(<Routers />);

测试

<div className="mt-[2px] bg-blue-500 text-white p-4 rounded-lg text-center">
  <h1 className="text-2xl font-bold">Tailwind CSS 运行成功！h1>
  <p className="mt-2">背景为蓝色、文字为白色，且有圆角和内边距。p>
div>