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

neekobn8  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(197)

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中

sshcrbum

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;
  }
}

相关问题