vue3中安装tailwindcss

1. 安装 Tailwind CSS 及其依赖

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

npm install -D tailwindcss@3

npm 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 CSS

createApp(App).mount('#app')

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

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