@apply not working in tailwindcss | Next.js in global css file

user_13623971 0
Viewed 2921
@tailwind base;
@tailwind components;
@tailwind utilities;

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

@apply is not woking css global file in Nextjs with tailwindcss i also used mode to jit but still not working ,need help ... enter image description here

tailwind-css next.js reactjs
3 Answers

@apply is a way to use own custom CSS made with Tailwind directive within the common CSS file. Therefore, bg-[#06202A] must be declared before using it.

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

Siolution 1

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

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

Also, the following link will be helpful to you. good luck, happy coding!

user_46340600

In current version (v2.1.4) it is not possible to @apply classes generated by JIT.
From documentation:

You can only @apply classes that are part of core, generated by plugins, or defined within a @layer rule. You can’t @apply arbitrary CSS classes that aren’t defined within a @layer rule.

You can add new color in config.
For example blue: '#06202A' and than you can @apply bg-blue.

user_55970170

Instead, just try adding

@tailwind apply;

and it should work as expected.

user_170733590
Related