跳至主要內容

RuoYi-Vue3 项目集成 Tailwind CSS 教程

GGBOND2025/11/23大约 3 分钟前端开发VueTailwindCSSRuoYi

RuoYi-Vue3 项目集成 Tailwind CSS 详细教程

📝 前言

Tailwind CSS 是一个「实用优先」的 CSS 框架，通过预定义的原子类快速构建界面，无需编写大量自定义 CSS。本教程将详细介绍如何在 RuoYi-Vue3 项目中集成 Tailwind CSS，包括基础配置、常见问题解决方案以及完整的集成流程。

🔧 前置要求

  1. Node.js 环境：v14.18+ 或 v16+（Node.js 官网 下载）
  2. RuoYi-Vue3 项目：已创建并成功运行的项目
  3. npm 或 yarn：确保包管理器可用

🚀 集成步骤（Vite 项目通用）

步骤 1：进入项目目录并安装依赖

# 进入 RuoYi-Vue3 项目根目录
cd ruoyi-Vue3-project

# 确保项目依赖已安装
npm install

步骤 2：安装 Tailwind CSS 相关依赖

# 安装核心依赖
npm install -D tailwindcss postcss autoprefixer

步骤 3：生成配置文件

执行命令自动生成 tailwind.config.js 和 postcss.config.js：

npx tailwindcss init -p

如果出现错误

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\86130\AppData\Local\npm-cache\_logs\2025-11-23T14_13_14_452Z-debug-0.log

这是因为安装的是 Tailwind CSS v4 版本，其命令行接口发生了变化。

🛠️ 错误解决方案：Tailwind CSS v4 兼容性问题

Tailwind CSS v4 把命令行工具拆分到 @tailwindcss/cli 包中，不再通过主包提供 init 命令。提供以下两种解决方案：

方案 1：降级到稳定的 Tailwind v3（推荐）

# 1. 卸载当前版本
npm uninstall -D tailwindcss postcss autoprefixer

# 2. 安装 v3 版本（兼容性更好）
npm install -D tailwindcss@3 postcss autoprefixer

# 3. 执行初始化（v3 支持该命令）
npx tailwindcss init -p

方案 2：继续使用 Tailwind v4

# 安装 v4 主包 + 独立 CLI
npm install -D tailwindcss@4 @tailwindcss/cli postcss autoprefixer

# 用 CLI 初始化
npx @tailwindcss/cli init -p

✅ 验证配置文件生成

成功执行后，项目根目录会生成两个关键配置文件：

  • tailwind.config.js：Tailwind CSS 主配置文件
  • postcss.config.js：PostCSS 配置文件

推荐方案说明：使用方案 1（Tailwind v3）更为稳妥，兼容性更好，避免因版本差异导致的配置问题。

步骤 4：配置 Tailwind CSS（关键）

打开 tailwind.config.js，修改 content 字段，指定 Tailwind 需要扫描的文件路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 扫描 src 目录下所有组件文件
    "./components/**/*.{vue,js}",     // 如果有单独的组件目录也需添加
  ],
  theme: {
    extend: {
      // 可以在这里扩展主题配置（如颜色、字体等）
    },
  },
  plugins: [],
### 步骤 5：导入 Tailwind 样式

在项目的入口 CSS 文件（通常是 `src/style.css` 或 `src/assets/css/index.css`）顶部添加以下内容：

``` css
/* 导入 Tailwind CSS 基础样式 */
@tailwind base;      /* 基础样式：默认字体、margin/padding 重置等 */
@tailwind components; /* 组件样式：可自定义复用组件类 */
@tailwind utilities; /* 工具类：核心样式类，如 w-10、bg-red-500 等 */

步骤 6：调整vite.config.js

在 vite.config.js 中添加以下内容：

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
    css: {
      postcss: {
        plugins: [
          tailwindcss,
          autoprefixer,
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              }
            }
          }
        ]
      }
    }

步骤 7 ：测试集成效果

修改一个 Vue 组件（例如 src/App.vue），添加 Tailwind CSS 类：

<template>
  <div class="text-2xl font-bold text-red-500 mt-10 text-center">
    Tailwind CSS 在 RuoYi-Vue3 项目中集成成功！
  </div>
</template>

启动项目并验证：

# 启动开发服务器
npm run dev

打开浏览器访问项目，如果看到红色加粗的文字，说明 Tailwind CSS 集成成功！

Copyright © 2025 GGBOND