vue3中安装tailwindcss

1. 安装 Tailwind CSS 及其依赖

这里安装的是Tailwindcss 版本3。我安装版本4，生成配置出错。

npm install -D tailwindcss@3npm install -D postcss autoprefixer

版本信息：

"autoprefixer": "^10.4.21",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17",

node版本：22.15.0

vite版本："vite": "^6.2.0"

vue版本："vue": "^3.5.13",

2.生成 Tailwind 配置文件

npx tailwindcss init -p

执行这个命令，会在项目根目录生成 tailwind.config.js、postcss.config.js文件

修改tailwind.config.js文件，在content中添加配置

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

3. 在 src 目录下创建一个 assets/css 文件夹，并在其中创建 index.css 文件，添加 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

文件目录可以任意，主要是要在main.js中导入。

4. 在 main.js 中导入这个 CSS 文件：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/index.css'  // 导入 Tailwind CSScreateApp(App).mount('#app')

然后就可以在项目中使用了！

Utility-First Fundamentals - TailwindCSS中文文档 | TailwindCSS中文网