Vue 3 项目中引入 Tailwind CSSVue 3 项目中引入 Tailwind CSS 1. 安装依赖在项目

Vue 3 项目中引入 Tailwind CSS

1. 安装依赖

在项目根目录下运行以下命令，安装 Tailwind CSS 及其依赖项：

 npm install -D tailwindcss postcss autoprefixer

2. 生成配置文件

运行以下命令生成 tailwind.config.js 和 postcss.config.js 文件：

npx tailwindcss init -p

3. 配置 Tailwind

编辑生成的 tailwind.config.js 文件，配置 content 属性，指定 Tailwind 应扫描的文件路径：

1. `tailwind.config.js`

这是一个 Tailwind CSS 的配置文件，你可以在这里自定义 Tailwind 的行为，例如配置主题、扩展样式、添加插件等。默认生成的内容如下

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

2. `postcss.config.js`

这是一个 PostCSS 的配置文件，用于指定 PostCSS 的插件和配置。默认生成的内容如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. 创建 Tailwind 样式文件

在 src 目录下创建一个 index.css 文件，并添加以下内容

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

5. 引入 Tailwind 样式

在 src/main.js 或 src/main.ts 文件中引入 index.css

import './index.css';

6. 使用 Tailwind

现在可以在 Vue 组件中直接使用 Tailwind 的类名。例如

<template>
  <div class="text-3xl font-bold underline">Hello Tailwind!</div>
</template>

注意

从 Tailwind CSS v4 开始，npx tailwindcss init 命令已被废弃。如果你安装了 Tailwind CSS v4 或更高版本，建议直接在 CSS 文件中配置 Tailwind，而不是通过 tailwind.config.js 文件。

解决方法：

安装 Tailwind CSS v3：如果你希望继续使用 npx tailwindcss init -p 命令，可以降级到 Tailwind CSS v3：

npm uninstall tailwindcss
npm install tailwindcss@3 -D

Tailwind CSS v4 不再需要单独配置 PostCSS。如果你使用的是 Vite，可以直接安装 @tailwindcss/vite 插件。运行以下命令：

npm uninstall postcss
npm install @tailwindcss/vite

2. 更新 Vite 配置

在 vite.config.js 中，确保你引入了 @tailwindcss/vite 插件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ]
});

4. 创建 Tailwind 样式文件

在 src 目录下创建一个 index.css 文件，并添加以下内容

@import "tailwindcss";

Vue 3 项目中引入 Tailwind CSS