Tailwind 在带有 nuxt 的 vue 组件中的样式内不起作用答案

【问题标题】：Tailwind doesn't work inside the style in a vue component with nuxtTailwind 在带有 nuxt 的 vue 组件中的样式内不起作用
【发布时间】：2022-01-21 15:21:36
【问题描述】：

我正在尝试访问组件内的 Tailwind 类。

我在 Nuxt js 上使用 Tailwindcss。

我可以通过模板完美访问它。问题是当我尝试访问标签内的类时

<style lang="scss" scoped>
.el-menu-item.is-active {
  @apply .bg-black
}
</style>

错误

.bg-back 类不存在。如果.bg-back 是一个自定义类，确保它是在 @layer 指令中定义的。

48 | 49 | .el-menu-item.is-active { 50 | @apply .bg-back | ^ 51 | }

更新

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config

css: ['@/assets/css/main'],

【问题讨论】：

但是你应该在基础层定义bg-back以便被识别为顺风助手
我不明白。我怎么做？感谢收听。
bg-back 是什么意思？这没有被定义为顺风 css 助手
未编译
您可能指的是bg-black，而不是bg-back。另外，您是否为此使用了 Nuxt 模块？还是您以某种方式静态导入了它？

标签： vue.js nuxt.js vuejs3 tailwind-css

【解决方案1】：

你应该使用 'bg-black' 而不是 '.bg-black'; 'bg-black' 是类名，'.bg-black' 是一个 CSS 选择器。去掉那个点就可以了。

【讨论】：