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

这样才不会导致报错。

相关推荐
JavaEdge.13 小时前
scoped 样式与 data-v-* 属性选择器(写给 Javaer)
开发语言·vue
梨想橙汁16 小时前
CSS Grid 网格布局:二维布局神器,轻松实现复杂网页排版
前端·css
晴天1616 小时前
CSS 预处理器深度解析-Day35
前端·css
sunphp开发者16 小时前
明灯智慧地图导览系统制作教程
vue·php·uniapp·js·贴图
小江的记录本17 小时前
【CSS】CSS 核心:盒模型、BFC/IFC、Flex/Grid 布局、响应式布局、移动端适配(附《思维导图》)
前端·css·面试·前端框架·tensorflow·html5·xss
小江的记录本18 小时前
【HTML】HTML5 新特性、语义化标签、浏览器渲染流程(附《思维导图》)
前端·css·面试·前端框架·html·css3·html5
ℋᙚᵐⁱᒻᵉ鲸落1 天前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
慧一居士1 天前
Vite项目中使用Less步骤,详细使用示例
前端·css
慧一居士1 天前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass
南城以南溫暖如初1471 天前
社交裂变商城系统设计与实战开发指南
java·spring boot·mysql·vue·mybatis