如何在Vue 3项目中使用Tailwind CSS构建可复用的CSS组件？-css教程-PHP中文网

最轻量解法是用 @apply 在 @layer components 中封装样式，需置于 tailwind 入口 css 文件而非 vue 组件 style 块；动态类和复杂选择器不支持；高频复用时才封装，否则直接写实用类更佳。

如何在vue 3项目中使用tailwind css构建可复用的css组件？

怎么用 `@apply` 封装 Tailwind 类到 CSS 文件里

直接在 Vue 组件模板里写一堆 bg-blue-500 p-3 rounded hover:bg-blue-600 很快就会失控，尤其当同一套样式在多个地方出现。最轻量、不依赖框架的解法是用 @apply 抽到 CSS 文件中。

关键点：必须放在 @layer components 里，否则会被 PurgeCSS 清掉；且不能用在 Vue 单文件组件的 <style></style> 块里（JIT 模式下无效）。

在 src/styles/tailwind.css 或类似入口文件中写：

@layer components {
  .btn {
    @apply px-4 py-2 font-medium rounded-lg transition-colors;
  }
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
  }
}

然后在任意 Vue 组件中直接用：<button class="btn btn-primary">Save</button>
注意：@apply 不支持动态类（比如 @apply {{ dynamicClass }}），也不支持嵌套伪类以外的复杂选择器（如 .btn:hover .icon）

为什么 Vue 3 组件里别用 `@apply` 写样式

有人把 @apply 直接塞进 <style scoped></style>，结果构建后样式消失——这是常见坑。Tailwind 的 JIT 引擎只扫描 content 配置里指定的文件路径，而 <style scoped></style> 是运行时注入的字符串，根本不会被解析。

Auth0 Vue

在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

错误写法（无效）：

<style scoped>
.my-btn {
  @apply bg-red-500 text-white px-3 py-1;
}
</style>

正确做法：要么提成全局 @layer components 类，要么在组件内直接写实用类（更推荐），或用 tv()（见下一条）
如果你坚持要“组件级封装”，就该用逻辑层抽象，而不是 CSS 层抽象

如何用 `tailwind-variants` 做带变体的 Vue 组件

当按钮需要 variant、size、disabled 等多个开关控制样式时，@apply 就力不从心了。tailwind-variants 是目前最贴近 Vue 开发习惯的方案。

安装：npm install tailwind-variants
在 composables/useButton.ts 里定义：

import { tv } from 'tailwind-variants'

export const buttonVariants = tv({
  base: 'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
  variants: {
    variant: {
      solid: 'bg-blue-600 text-white hover:bg-blue-700',
      outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50',
    },
    size: {
      sm: 'px-2 py-1 text-sm',
      md: 'px-4 py-2',
    },
  },
  defaultVariants: {
    variant: 'solid',
    size: 'md',
  },
})

在 Button.vue 中使用：class="{ buttonVariants({ variant: props.variant, size: props.size }) }"
它生成的是真实类名字符串，完全兼容 Vue 的响应式更新和 SSR
注意：tv 返回的是函数，不是 CSS 类，所以不能直接写在 class 属性里，必须调用