Dynamic component variants

[zipper]

Hello,
I have recently started migrating Tailwind v3 project to Tailwind v4. For the most part, everything is going smoothly and I enjoy the new CSS approach. But I have just found something I'm not sure if it is a bug or intended behaviour.

In v3, custom components like .btn, .card, ... were added via @layer components. While this wasn't using the native CSS layers, it allowed you to use your components with variants without writting any more code. For example md:btn, lg:card, ... all of those automatically worked by just defining the base class. This was really nice feature (although I have used it much less then anticipated when I found out 🙂), even though it sometimes outputted some complicated convoluted classes, which were not used.

But in v4, the @layer components doesn't seem to be processed in any way by Tailwind - no purging of unused classes, no dynamically created variants like md:btn. Is this the intended behaviour, a bug, or is there something wrong with my setup that simply disables those things?

My simplified setup looks like this:

@layer theme, base, prose, components, utilities;

@import "tailwindcss/theme.css" layer(theme) source(none);
@import "tailwindcss/preflight.css" layer(base.tailwind) source(none);
@import "tailwindcss/utilities.css" layer(utilities.tailwind) source(none);

@import "./components/index.css" layer(components);

@source not inline("container");
@source "../../UI/**/*.{html,latte}";

For a build, I'm using webpack with postcss-import (I need a custom path resolver) and @tailwind/postcss. I have tried to use @layer components inside the file instead of layer(components) with import, but that doesn't change the behaviour. I also tried to remove the postcss-import just to be sure, but that doesn't change anything either.