第一步:安装依赖
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 的配置方法