[V3] Build Time Imports and CSS Layers

[stevegreco]

I have an internal component library that has its own CSS. Up until now we have been using build time imports to inject our CSS between the components and utilities. This has worked great and makes sure that everything is loaded in the correct order.

The main problem here, is that ./custom-components.css now utilizes layers internally, this seems to be causing huge problems with Tailwind. Is there any way to accomplish this? This seems to not work at all and actually ends up breaking all of the CSS.

I think the root problem here is actually postcss-import which seems to not support this because it will move the imports above the @layer definition.

@layer base, components, custom, utilities;

@import "tailwindcss/base" layer(base);
@import "tailwindcss/components" layer(components);
@import "./custom-components.css" layer(custom);
@import "tailwindcss/utilities" layer(utilities);