從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>