im using tailwindcss v4 on my next.js project .

my global.css file is

@import "tailwindcss";


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

im getting the error as

./src/app/globals.css
Error evaluating Node.js code
Error: Cannot apply unknown utility class: border-border
    [at onInvalidCandidate (C:\Users\poude\Desktop\My 

is there any way to solve this issue .

my vscode shows the issue as

Unknown at rule @applycss(unknownAtRules)

im using tailwindcss v4 on my next.js project .

my global.css file is

@import "tailwindcss";


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

im getting the error as

./src/app/globals.css
Error evaluating Node.js code
Error: Cannot apply unknown utility class: border-border
    [at onInvalidCandidate (C:\Users\poude\Desktop\My 

is there any way to solve this issue .

my vscode shows the issue as

Unknown at rule @applycss(unknownAtRules)

• javascript
• next.js
• tailwind-css

1 Answer 1

You seem to be trying to @apply Tailwind class names that wouldn't exist. You'd need to set values for them first, like:

@import "tailwindcss";

@theme {
  --color-border: foo;
  --color-background: bar;
  --color-foreground: baz;
}

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

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter/adamwathan/status/1226511611592085504
• https://twitter/adamwathan/status/1559250403547652097
• https://x/adamwathan/status/1890404835888910467

So you could rewrite it as:

@import "tailwindcss";

@theme {
  --color-border: foo;
  --color-background: bar;
  --color-foreground: baz;
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
}