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

报错如下:

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>

这样才不会导致报错。

相关推荐
bigHead-28 分钟前
12. CSS 布局与样式技巧
前端·css
Mryan20056 小时前
解决Vue项目依赖错误:使用electron-vite重建
前端·javascript·electron·vue
Fighting_p7 小时前
【组件】翻牌器效果
前端·javascript·css
知月玄7 小时前
网页前端开发(基础进阶1)
java·前端·javascript·css
Pu_Nine_98 小时前
TailwindCSS v4 快速入门教程
前端·css·前端框架
钱端工程师8 小时前
css设置动态数值:clamp函数
前端·css
kooboo china.8 小时前
Tailwind CSS 实战,基于 Kooboo 构建 AI 对话框页面(三):实现暗黑模式主题切换
css·编辑器·html·交互
施墨8 小时前
web-css
前端·css
linux-hzh8 小时前
day04
前端·css·html
残*影11 小时前
内联盒模型基本概念?——前端面试中的隐形考点剖析
前端·css·面试