解决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>

这样才不会导致报错。

相关推荐
用户059540174463 小时前
把 AI Agent 记忆存储验证从 40 分钟手测压到 3 分钟,pytest + Docker 这套组合太顶了
前端·css
用户059540174461 天前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css
满栀5851 天前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
jjw_zyfx1 天前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
碧水澜庭2 天前
头条【vue+fastapi 】全栈教学项目系列之《02_双系统零基础环境搭建手册》
vue·fastapi
倾听醉梦语2 天前
React/Vite/Next.js 前端开发工具 SpotPatch:点击页面元素精准定位 JSX/TSX 源码
javascript·react·ai编程·vite·next.js·前端开发工具
Mh3 天前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
郭wes代码3 天前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
DsirNg3 天前
从 `@wheel.prevent.stop` 到事件捕获:一次讲清浏览器事件流与 Vue 事件修饰符
javascript·vue·事件修饰符·事件冒泡·dom 事件·事件捕获·wheel
其美杰布-富贵-李3 天前
Vue 3 模板语法速通:彻底理解 `:`、`@`、`#`、`v-if`、`v-for` 与 `v-model`
vue