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

这样才不会导致报错。

相关推荐
sunshine64131 分钟前
【CSS】实现文本颜色渐变
css·html·css3
海的诗篇_43 分钟前
前端开发面试题总结-vue2框架篇(四)
前端·css·面试·vue·html
暖苏2 小时前
Vue.js第一节
前端·javascript·css·vue.js·ecmascript
断竿散人3 小时前
📏CSS尺寸单位终极手册:从px到fr的完全征服指南
前端·css·响应式设计
还是大剑师兰特4 小时前
28个炫酷的纯CSS特效动画示例(含源代码)
前端·css
半碗水5 小时前
修·洞(JS)
javascript·css
游九尘5 小时前
vue2自定义指令directive用法: dom中关键字文字高亮
前端·vue
夏沫mds6 小时前
Hyperledger Fabric食品溯源
运维·vue.js·go·vue·区块链·gin·fabric
青鸾@8 小时前
照片墙html
css·html·css3
烛阴8 小时前
💻 从0到1掌握CSS选择器:精准元素定位的终极指南
前端·javascript·css