官方文档

1.首先需要创建vue项目

1

npm create vue@latest Tailwind-demo

2.安装Tailwind CSS

通过 npm 安装 tailwindcss 和 @tailwindcss/vite。

1

npm install tailwindcss @tailwindcss/vite

这里需要注意不要用3.x的安装方法去安装4.x版本。
如果你用的是npm install -D tailwindcss postcss autoprefixer，说明安装的是3.x版本。
之前我问AI如何安装结果给我整了一个3.x版本的安装方法。

3.配置Vite插件

将 @tailwindcss/vite 插件添加到你的 Vite 配置中(vite.config.ts文件)。

1
2

import tailwindcss from '@tailwindcss/vite'
tailwindcss(),

4.导入 Tailwind CSS

• 新建 src\styles\index.css,引入

1

@import "tailwindcss";

• 将该index.css导入main.ts入口文件

1

import '@/styles/index.css'

5.测试

1

  <h1 class="text-3xl font-bold text-center text-blue-300">Hello world!</h1>

可以发现Tailwind CSS 生效