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

这样才不会导致报错。

相关推荐
NetX行者4 小时前
用 Vite + Vue3 + UnoCSS 搭建企业级项目模板(一):基础骨架
vue·vite·unocss
软件技术NINI4 小时前
圣罗兰彩妆html+css 4页
前端·css·html
溪语流沙6 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
传人once11 小时前
企业官网静态页基础结构如何搭
javascript·css
damoluomu11 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
程序员大阳11 小时前
副队长HTML+CSS博客网站实战 (1)–项目介绍与整体规划
css·html·实战·教程·博客网站·规划
程序员大阳11 小时前
副队长HTML+CSS博客网站实战 (3)–首页主体:Grid 文章卡片 + 侧边栏布局
css·html·侧边栏·博客网站·首页·文章卡片
java水泥工11 小时前
什么是前端
java·vue·html5
程序员Sunday11 小时前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
爱喝水的小周12 小时前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html