Safelisting and media queries break when using a module that uses TW4 in an app that also uses TW4 with css config

[m-shum]

I built a Nuxt module to externalise and reuse header and footer components across a number of applications that share the same design system. This module uses tailwind 4 with a CSS config. When this module is enabled in a parent application, that application's @source safelisting breaks for classes with media queries – for example sm:py-14 will work, but py-12 sm:py-24 will only apply py-12, regardless of which class comes first.

In my module'smain.css file I added this line to enable tailwind in components: @source '../../../runtime/components';

In the parent app that uses the module, there's a number of imports such as:

@import 'tailwindcss';
@import './safelist.css';

...

Where safelist.css contains all the @source declarations for classes I want safelisted.

I think the issue is how @source is being compiled in the parent app – or maybe where it's being declared in the module, but as I said, I'm pretty new to module-building so if anyone could point me in the right direction, I'd be very grateful.