Cannot apply unknown utility class xyz

[arackaf]

What version of Tailwind CSS are you using?

For example: v4.1.7

What build tool (or framework if it abstracts the build tool) are you using?

For example: Vite 6.1.1

What version of Node.js are you using?

For example: v20.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/arackaf/booklist/tree/feature/tailwind-upgrade-hunter

npm i
npm run dev
http://localhost:5173/landing - that url specifically

I know that's not a minimal repro - if the team doesn't have time to look at this without a minimal repro that's totally fine - hoping to surface this here for anyone else seeing this issue - and of course I'll include a fix / solution once I have one - I've also shared this with the shadcn-svelte maintainer

Describe your issue

I have the notorious Cannot apply unknown utility class: border-border for any use of @apply

BUT this is not (or doesn't seem to be) a case of needing @reference.

EVERY use of @apply is inside of my main css file. This is what the very top of said css file looks like

@import "tailwindcss";
@import "tw-animate-css";

@import "./styles/main-layout.css" layer(utilities);

Every @apply I have is underneath that content - the content above is the very beginning of the css file.

[wongjn]

The problem you are experiencing is more literal as the error states, border-border is an unknown class name with your configuration. Comparing to your master branch, it seems to me that you haven't completely migrated your tailwind.config.js, i.e this line:

  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border) / <alpha-value>)",

Would need to be:

@theme {
  --color-border: hsl(var(--border));
}

Then, border-border would be available. You'd probably need to consolidate other aspects of your previous configuration too.

[arackaf]

Oh my god - I think the shadcn-svelte mirgration might be missing some steps. Thank you SO much for looking. Very kind of you :)