Custom CSS layering architecture, without @apply

[Nefcanto]

We're using Tailwind for years now. And I'm pretty happy with it. Yet recently I came across a problem for which the solution needs us to rethink how to use Tailwind.

Here's the problem. We want to be able to create hundreds of themes in one project, based on atomic, composable, headless, semantic UI in the core. We need to reduce boilerplate and repetition brutally. So, basically, we ended up with an architecture that works:

1- Creating each theme in a separate directory
2- Creating a Vite plugin to compile each theme into a separate CSS file
3- Including each theme's CSS file dynamically, based on the tenant
4- Creating atomic, semantic, headless composable UI parts/components in the core (they encapsulate structure, behavior, and logic)
5- Reusing those components and only applying different styles

So, we only have one "blog post card". But through that logic, settings that come from the API, and data checking for nulls, undefined or empty values, we show almost tens of different cards.

Or we have almost 10 variant for showing cards. But we are able to create 99% of the card sections we see on the internet.

So, here is an example code of our index:

import { Cards } from 'core'

return <Cards 
    class='features' 
    data={features}
/>

Then every style applies in CSS.

The point is, it works. I'm not here asking "whether it works or not". It works. We're in production and we're delivering.

Now, I'm just here to ask for improvements in writing Tailwind in CSS files. Because most of us, in most projects write it in component files.

1- Can we use custom layering architecture? What do we lose if we do so?

@layer layout, page, part

@layer layout { }
@layer page {}
@layer part {}

2- Is it possible to get rid of the repetitive boilerplate of @apply in CSS files?