vite + vue 项目下使用 tailwindcss

版本

node: >= 18.0.0

vue: 3.5.13

vite: 6.3.1

tailwindcss: 4.1.6

@tailwindcss/vite: 4.1.6

tailwindcss

• ✅ 细粒度类库
  提供数千个原子级CSS类（如 text-center、bg-blue-500、p-4）
• 🧩 组合式开发
  通过类名组合构建完全自定义的UI，无需编写自定义CSS
• 🚫 无预设组件
  不强制使用特定样式的组件

项目创建

创建项目：my-app

$ pnpm create vue
$ cd my-app
$ pnpm i

@tailwind/vite 插件目前只支持 ESM 规范，所以你的项目的 package.json 需要设置 "type": "module"

tailwindcss 配置

$ pnpm i tailwindcss @tailwindcss/vite -D

vite.config.js

vite 中配置 @tailwindcss/vite 插件；

import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

css

在 main.js 中的入口 css 文件中添加：

main.css

tailwind-Theme variables

@import "tailwindcss";
@config "../../tailwind.config.js";
// @plugin "@tailwindcss/typography"; // 如果需要插件时，添加

// 自定义颜色等
@theme {
  --color-abcd: red;
}

tailwind.config.js

没有需求时，不创建该配置文件也可以

在根目录位置创建 tailwind.config.js；

可以配置一些自定义的颜色变量等；

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        "my-primary": "#42b883",
      },
    },
  },
  plugins: [],
};

VSCode 插件

安装插件 Tailwind CSS IntelliSense，可以在鼠标移动到 class 时提示对应的样式；

使用

App.vue

<template>
  <header>
    <div class="text-amber-700 text-2xl font-bold">Hello Vue</div>
    <div class="text-my-primary text-2xl font-bold">Hello Vue</div>
    <div class="text-abcd text-2xl font-bold">Hello Vue</div>

    <div class="my-title">Hello Vue</div>
  </header>
</template>

<style scoped>
@reference  "./assets/main.css";

.my-title {
  @apply text-purple-700 text-2xl font-bold;
}
</style>

tailwind css v4 文档