vue3+vite项目引入tailwindcss

从2025年1月tailwindcss4.0发布开始使用tailwindcss比之前简化很多

1,安装

yarn add tailwindcss @tailwindcss/vite

2,配置vite.config.js

import tailwindcss from '@tailwindcss/vite';

...
		plugins: [
			tailwindcss(),
			...
		]
...

3,在主css文件顶部添加

注意一定是css文件,不能是scss文件

@import 'tailwindcss';

闭坑指南

注意一定是css文件,不能是scss文件
并确保main.js中引入了此css文件
此css文件要尽量靠前, 防止类名冲突时优先使用tailwindcss
如果主css文件是scss结尾的就新建一个tw.css添加下一句, 并在main.js中引入此文件

测试

下面代码红色背景就表示成功了

<div class="bg-red-900">test</div>