reactjs - @apply 在 tailwindcss 中不工作 |全局 css 文件中的 Next.js

Question

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

@layer base{
body {
    @apply bg-[#06202A] text-grey-300; 
}
}

@apply 没有在带有 tailwindcss 的 Nextjs 中唤醒 css 全局文件我也使用模式来 jit 但仍然无法工作，需要帮​​助...... enter image description here

Answer 1

@apply 是一种在通用 CSS 文件中使用通过 Tailwind 指令制作的自定义 CSS 的方法。因此，bg-[#06202A]必须在使用前声明。

You neeed to pre defined in your TailwindCSS file before use it. so these could be solution.

解决方案1

@layer base{
   body {
       --body-bg-color: '#06202A';
       @apply bg-var(--body-bg-color) text-grey-300; 
   }
}

解决方案2

body {
   --body-bg-color:'#06202A';
   --tw-text-opacity: 1;
   background-color: var(--body-bg-color);
   color: rgba(209, 213, 219, var(--tw-text-opacity));
}

此外，以下 link会对你有所帮助。 祝你好运，编码愉快!