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

这样才不会导致报错。

相关推荐
可爱生存报告4 小时前
vue3 vite quill-image-resize-module打包报错 Cannot set properties of undefined
前端·vite
lingliang5 小时前
使用 JS 渲染页面并导出为PDF 常见问题与修复
javascript·pdf·vue
复苏季风7 小时前
从布局难民到 flex 大神:新人必学的 Flex 布局全攻略
前端·css
xiaohe06017 小时前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(二)
vite·rollup.js
然我7 小时前
一篇吃透移动端适配!从原理到实战,面试题也帮你整理好了 📱
前端·css·html
Olrookie7 小时前
RuoYi-Vue3项目中Swagger接口测试404,端口问题解析排查
前端·webpack·vite
米欧7 小时前
使用luckysheet在线处理复杂表格
前端·excel·vite
国家不保护废物7 小时前
Webpack 与 Vite:现代前端构建工具的双子星
前端·webpack·vite
晓得迷路了9 小时前
栗子前端技术周刊第 95 期 - Next.js 15.5、Rslint、2025 年 CSS 现状报告...
前端·javascript·css
wuzuyu3651 天前
生成一个竖直放置的div,宽度是350px,上面是标题固定高度50px,下面是自适应高度的div,且有滚动条
前端·javascript·css