在 Vue 3 / Nuxt 4 中使用 Tailwind CSS

Vue 3 和 Nuxt 4 是 Tailwind CSS 的 “原生搭档”。通过 Vite 或 Nuxt 模块，我们可以实现零配置的极速集成。

在 Vue 中配置 Tailwind CSS

在 Vue 3项目中，我们都是通过 Vite 插件来引入 Tailwind CSS 的，与 “Tailwind CSS Vite 配置” 是完全一样的。

1. 安装依赖

首先，执行以下命令来安装相关依赖：

npm i tailwindcss @tailwindcss/vite -D

2. 配置 Vite

在 vite.config.js （或 vite.config.ts）中添加插件：

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

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

3. 引入 Tailwind CSS

首先，在你的主 CSS 文件（通常是 src/style.css 或 src/assets/main.css）的最顶部，加入下面这行代码：

@import "tailwindcss";

然后在 Vue 项目的入口文件（src/main.js 或 src/main.ts）中引入这个包含了 Tailwind 指令的 CSS 文件。

import { createApp } from "vue";
import "./style.css";     // 务必确保正确引入了你的全局 CSS 文件
import App from "./App.vue";

createApp(App).mount("#app");

在 Nuxt 中配置 Tailwind CSS

Nuxt.js 4.x 版本配置 Tailwind CSS 更加简单，官方提供了专门的模块，省去了繁琐的配置步骤。只需要以下 2 步即可。

1. 安装依赖

首先，执行以下命令来安装相关依赖：

npm i tailwindcss @tailwindcss/nuxt -D

2. 配置 nuxt.config.js

我们只需要在项目根目录创建一个 assets/css/main.css 文件，然后写入 @import "tailwindcss";，最后在 nuxt.config.js 中引入即可：

export default defineNuxtConfig({
    css: ["~/assets/css/main.css"],
    modules: ["@tailwindcss/nuxt"]
});

在组件中使用 Tailwind CSS

配置 Tailwind CSS 好了之后，在 Vue 或 Nuxt 组件文件中，我们有以下 2 种方式来使用它：

在 HTML 标签 class 中写类名。
在 style 标签中使用 @apply。

示例：

<template>
    <nav class="flex justify-between items-center h-16 px-8 bg-white border-b border-gray-100 shadow-sm">
        <div class="text-xl font-bold text-green-500 cursor-pointer">
            {{ navTitle }}
        </div>
        <div class="flex gap-6 text-gray-600">
            <a href="#" class="hover:text-green-500 transition-colors">教程</a>
            <a href="#" class="hover:text-green-500 transition-colors">课程</a>
        </div>
    </nav>
</template>

<script setup>
    const navTitle = "绿叶网";
</script>

<style scoped>
    /* 如果类名太长，可以在这里使用 @apply 提取 */
    .nav-link {
        @apply flex items-center;
        @apply px-4;
        @apply text-sm text-gray-500; 
        @apply transition-colors;
    }
</style>