Tailwind CSS @apply Directive Issue within Media Queries

This repository demonstrates a bug where Tailwind CSS's @apply directive does not function as expected when used inside CSS @media queries or other at-rules. The issue is that styles applied within these conditional blocks are sometimes not properly resolved.

Steps to Reproduce

1. Clone this repository.
2. Run npm install to install necessary dependencies (if any).
3. Open bug.css to see the problematic code.
4. Notice that the expected styles don't apply in the @media query due to the failing @apply directive. Compare this to the corrected style in bugSolution.css
5. Open bugSolution.css to see the corrected approach

Resolution

The solution, as shown in bugSolution.css, involves directly applying the styles in the media query instead of relying on @apply within the conditional block. It's important to maintain correct specificity in cases where you might have conflicting selectors.