How to compile CSS with "@apply" directives using @tailwindcss/node

[AGS1130]

Hi there 👋🏽

My ask may not be considered relevant since I'm asking about working with the internals of Tailwind. If this is considered off-topic, please point me to the right channel for discussion, and I'll be happy to call this answered. Thanks!

I'm the author of Jade Garden 🌿. A very quick summary of what the library is, you can think of it as Class Variance Authority and Tailwind Variants that have been modified to write CSS, which is done with the complimentary plugins. I recently released major version upgrades and it's working as intended for a UI library I'm creating. While it is able to generate CSS that Tailwind can compile for an overall final output, I'd like to add a feature to the plugins that would convert the "apply" directives to plain CSS.

My use case for this is to give developers the choice of what to maintain when they inherit a design system. The major version upgrade to the plugins not only generates CSS, but can also return the components with their style configurations (the Class Variance Authority and Tailwind Variants functions). This is excellent for developers who prefer to work programmatically with their design system and want to be as close to their JS markup as possible. However, for developers who prefer to work with CSS (Svelte, Vue, outside of JavaScript UI frameworks), while they can do so with the "apply" directives, it's not a very pleasant experience to read all your CSS properties in one line 😅

I tried to get this feature to work a while back, but kept running into blockers. I could be very wrong on how to implement, but the idea was to take the main Tailwind CSS file from a developer's project (the entry for the plugin) along with the generated CSS files from the plugins and run it through the compile function from @tailwindcss/node. The last thing I remember was it kept throwing errors at me that I tried to accommodate as best I can, but ultimately I could not figure out how to resolve and get working 😕

If the community or contributors can point me toward a direction to get that working, this would be greatly appreciated! By the way, this is by no means an emergency, or a very high priority item on my list. It's a feature that is a want, but not a need 🙂

I will be very slow to respond to any suggestions or feedback between working a full-time job and working on the UI library 😉

Thank you very much 😃