当我尝试为Next.js 13设计我的应用时,我得到以下错误:
错误提示:C:\Users\User\Documents\webdev\TicketingApp\ticketing-app\app\globals.css text-default-text
类不存在。如果text-default-text
是自定义类,请确保它在@layer
指令中定义。样式表代码如下:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.icon {
@apply text-default-text text-xl;
}
.btn {
@apply hover:no-underline bg-blue-accent tracking-wider w-full text-center text-nav font-bold cursor-pointer uppercase px-4 py-2 rounded-md hover:bg-blue-accent-hover transition-colors block;
}
}
字符串
这怎么解决呢?没有一个类似的解决方案对我有效。
1条答案
按热度按时间eimct9ow1#
要解决此问题,您可以尝试以下解决方案之一:
1.在Next.js项目中升级Tailwind CSS:将Next.js项目中使用的Tailwind CSS版本更新到2.2.0或支持@layer指令的更高版本。您可以通过更新package.json文件中的“tailwindcss”包来完成此操作。
第一个月
1.删除@layer指令:如果无法升级Tailwind CSS,您可以删除@layer指令并在没有它的情况下组织样式。将样式移到@layer指令之外,看看是否可以解决问题。
@tailwind base; @tailwind components; @tailwind utilities;
.icon { @apply text-default-text text-xl; }
.btn { @apply hover:no-underline bg-blue-accent tracking-wider w-full text-center text-nav font-bold cursor-pointer px-4 py-2 rounded-md hover:bg-blue-accent-hover transition-colors block; }