Vue3 Tailwind CSS

Tailwind CSS 是当下流行的原子化 CSS 框架：它不提供现成组件，而是把内边距、颜色、布局等拆成一个一个「工具类」，开发者直接在 class 里组合出界面。与 Vue 的模板语法配合良好，改样式几乎不用再写新的 CSS 文件。

为什么选 Tailwind

• 免起类名：不需要为每个盒子想语义化名字。
• 移动优先：内置 sm、md、lg、xl 等响应式断点前缀。
• 按需生成：打包时只保留真正用到的工具类，体积可控。
• 与组件契合：每个 Vue 组件自带完整的样式描述。

安装与配置

以 Vite 项目为例安装依赖并初始化：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

在生成的 tailwind.config.js 中声明要扫描的文件：

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

再在 src/index.css 中写入三条指令并在 main.js 引入：

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

常用工具类示例

一个按钮只靠 class 就能完成全套样式：

<button class="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-blue-600">
  提交
</button>

效果：自带内边距、圆角、蓝色背景、白色文字，鼠标悬停时背景加深，全程没写一行自定义 CSS。

响应式布局

给类名加 md: 前缀，表示「屏幕达到 md 宽度后生效」：

<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <div class="rounded-lg bg-gray-100 p-4">卡片 1</div>
  <div class="rounded-lg bg-gray-100 p-4">卡片 2</div>
  <div class="rounded-lg bg-gray-100 p-4">卡片 3</div>
</div>

效果：手机上卡片纵向堆叠为一列，达到 md 断点后自动排成三列。

动态类名与状态

配合 Vue 的 :class 可按状态动态组合工具类：

<script setup>
import { ref } from 'vue'

const loading = ref(true)
</script>

<template>
  <button
    :class="loading ? 'cursor-not-allowed bg-gray-400' : 'bg-blue-500'"
    :disabled="loading"
  >
    {{ loading ? '加载中…' : '保存' }}
  </button>
</template>

效果：loading 为真时按钮变灰禁用，加载完成后变为可点击的蓝色按钮。

小结

Tailwind 用工具类替代手写 CSS，与 Vue 组件结合后样式就近、改动直观。先掌握间距、颜色、圆角与响应式断点这几组高频类，即可覆盖日常页面的绝大多数样式需求。