next.js `border-border`类不存在,如果`border-border`是自定义类，请确保它是在`@layer`指令中定义的

neekobn8 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(196)

The边框class does not exist. If边框is a custom class, make sure it is defined within a @层directive.

globals.css

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

 
@layer base {
  * {
    @apply border-border; //error
  }
  body {
    @apply bg-background text-foreground;
  }
}

字符串
我不知道这是怎么发生的。这是一个使用tailwind和typescript的react - Next应用程序，问题发生在tailwind.config或globals. css中

next.js

来源：https://stackoverflow.com/questions/77443221/the-border-border-class-does-not-exist-if-border-border-is-a-custom-class

1条答案

按热度按时间

sshcrbum1#

正如错误所说，要使用@apply作为类名，Tailwind必须知道类名，无论是通过Tailwind插件还是在@layer base/components/utilities中。
border-border不是Tailwind默认已知的类名，因此您需要将其定义为@apply it。
您可以在Tailwind插件中定义它，如：

module.exports = {
  // …
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.border-border': {
          // Your declarations here
        },
      })
    })
  ]
}

字符串
或者将border作为borderWidth的值（因为这将使用核心Tailwind borderWidth插件生成border-border类）：

module.exports = {
  // …
  theme: {
    extend: {
      borderWidth: {
        border: 'Your value here',
      },
    },
  },
}

型
或者在@layer的CSS中定义它：

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

@layer base {
  .border-border {
    /* Your declarations here. */
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

型

赞(0）回复(0）举报 2023-11-18

我来回答

next.js `border-border`类不存在,如果`border-border`是自定义类，请确保它是在`@layer`指令中定义的

1条答案

相关问题

热门标签

最新问答