解决Tailwind v4 中无法使用 @apply 方法。

Leisure_Time2025-05-28 9:29

报错如下：

javascript 复制代码

[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: bg-red-900

经过测试发现在纯 css 中才可以使用暂时不知道 scss 如何使用 @apply 方法

官方文档中有提到：官方文档配置

当中说明了：如果你想在 Vue 或 Svelte 组件的 <style> 块中或在 CSS 模块中使用@apply或 @variant，你将需要导入主题变量、自定义工具和自定义变体以使这些值在该上下文中可用

css 复制代码

<template>
  <h1>Hello world!</h1>
</template>

<style>
  @reference "tailwindcss";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

这样才不会导致报错。