两步在 Vite 中配置 Tailwindcss

第一步：安装依赖

npm i -D tailwindcss @tailwindcss/vite

第二步：引入 tailwindcss 更改配置

// src/main.js
import 'tailwindcss/index'

// vite.config.js
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

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

使用

<div class="text-red-500 text-[40px]">演示</div>

总结

• 以上是基于 tailwindcss@4.x 的配置方法
• 这是基于 tailwindcss@3.x 的配置方法