Media queries transformations for device breakpoint preview to work with Tailwind CSS in Astro

[pshemek]

I just started my journey with the starter kit. I've added Tailwind CSS support to the Astro frontend (global.css file with @import "tailwindcss"). I tested by adding some classes to body tag in [...slug].astro like:

const bodyClass = 'text-base lg:text-lg';

and it works in general.

However, it doesn't work in responsive preview. I found documentation page about device breakpoint preview but I cannot get how to make media queries transformations to work with Tailwind CSS in Astro.

Is it possible? Could you point me to the right direction?

Thank you!

[pshemek]

Okay, may be related to: apostrophecms/postcss-viewport-to-container-toggle#10

[BoDonkey]

Sorry (again) that I missed this. Do you know if your PR fixes the problem?

[BoDonkey]

Hi @pshemek - I looked into the problem. The "misplaced" :where() is causing troubles, but not the problems with Tailwind. Breakpoint preview uses containers and the responsive classes in Tailwind need viewport widths. Short term solution is to use @container and then @sm, etc... Long-term, I'm looking at whether I can change the postcss-viewport-to-container-toggle code to handle processing of Tailwind better.

[BoDonkey]

Okay, I refactored the AtRule to correctly handle the Tailwind CSS nesting pattern for media queries. This fix will go out with our next release around the end of November.