Tailwind CSS 使用

Tailwind CSS 通过工具类快速构建界面，适合 Vue 项目中的后台系统、运营页面和需要统一设计语言的业务应用。使用时应配合组件封装和设计 token，避免模板中堆出难维护的长 class。

• Tailwind CSS 3
  • 安装依赖
  • 配置扫描路径
  • 引入 Tailwind
  • 验证效果
• Tailwind CSS 4
  • 安装依赖
  • 配置 Vite
  • 引入样式
• 组件封装建议
• 常用布局片段
  • 居中容器
  • 自适应网格
  • 表单行
• 维护建议
• 常见问题
  • 样式没有生效
  • 动态类名丢失
  • 与组件库样式冲突

Tailwind CSS 3

安装依赖

cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

该命令会生成：

tailwind.config.js
postcss.config.js

配置扫描路径

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

引入 Tailwind

在 src/assets/main.css 中添加：

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

在入口文件引入：

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.css";

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

验证效果

<template>
  <button class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
    保存
  </button>
</template>

启动项目：

npm run dev

Tailwind CSS 4

Tailwind CSS 4 推荐使用 Vite 插件接入。

安装依赖

npm install tailwindcss @tailwindcss/vite

配置 Vite

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

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

引入样式

@import "tailwindcss";

组件封装建议

工具类适合快速表达样式，但重复出现的模式应该封装为组件。

<template>
  <button
    class="inline-flex h-9 items-center justify-center rounded border border-slate-300 px-3 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
defineProps<{
  disabled?: boolean;
}>();
</script>

常用布局片段

居中容器

<main class="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8"></main>

自适应网格

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"></div>

表单行

<label class="grid gap-1 text-sm">
  <span class="font-medium text-slate-700">用户名</span>
  <input class="h-9 rounded border border-slate-300 px-3 outline-none focus:border-blue-500" />
</label>

维护建议

• 不要把大量重复 class 散落在每个页面，稳定样式应封装组件。
• 颜色、间距、字号等全局规则应沉淀到主题配置或 CSS 变量。
• 动态 class 不要使用字符串拼接出完整类名，否则可能无法被扫描。
• 生产构建前检查页面，确认没有因为扫描路径缺失导致样式丢失。

常见问题

样式没有生效

检查 content 是否包含 .vue 文件路径，入口 CSS 是否已引入，以及开发服务是否重启。

动态类名丢失

避免这样写：

<div :class="`text-${type}-600`"></div>

推荐使用映射：

const colorClass = {
  success: "text-green-600",
  danger: "text-red-600"
};

与组件库样式冲突

优先确认加载顺序，再通过组件库主题变量或局部样式覆盖。不要大范围使用 !important，否则后续维护成本会很高。