How to configure tailwindcss v4 with multiple css files?

[Baertie]

Hi

In tailwind v3 what we dit was define a main.css and put the @tailwind at the top.
@tailwind base; @tailwind components; @tailwind utilities;

Then we have multiple css files for components we made. (I know they are already in component files themself but the thing is that like for button we can have an anchor tag, and a button element. But the thing is we use laravel blade and vue in one so that is why we put it in css files).

For reference
.btn { @apply inline-flex items-center justify-center gap-x-1.5 rounded font-medium tracking-widest text-white shadow-sm cursor-pointer; } .btn-xs { @apply px-2 py-1.5 text-xs; } .btn-sm { @apply px-4 py-2 text-sm; } .btn-md { @apply px-6 py-3 text-base; } .btn-lg { @apply px-10 py-4 text-lg; } .btn-rect { @apply p-2; } .btn-rect-sm { @apply p-1.5; } .btn-full { @apply rounded-full; }

Then i import those files into main.css and that worked out of the box.
Now i made a new branch and started upgrading tailwindcss but everything is broken now.
It is also like that tailwind does not scan the content in resources/ and so on.

I also get utility errors like " Cannot apply unknown utility class: sidebar-item-active "

Do i need to refactor my css or begin a different approach with tailwind?

Thanks in advance!

[wongjn]

You'd want to replace @tailwind base; @tailwind components; @tailwind utilities; with @import "tailwindcss"; Consider reading the upgrade guide for a general list of changes.

[Baertie]

Yes i meant that i followed the upgrade guide and my layout is pretty broken.

[wongjn]

Consider providing a git repo if you'd like us to have a closer look.

[Morteza-hp]

I had the same problem, turns out it doesn't recognizes your tailwind classes cause it doesn't know they exist, so you need to reference your main css file in which you imported tailwind. I imagine you have a file named button.css, in the first line of the file, you need to write something like @reference "../../globals.css";