Tailwind CSS @apply Directive Purging Issue

This repository demonstrates a common, yet often subtle, bug related to Tailwind CSS's @apply directive and its interaction with CSS purging during production builds. The issue occurs when classes used within the @apply directive are removed by the purge process, resulting in unexpected styling behavior in the production environment.

Problem

The @apply directive provides a convenient way to reuse styles, but if the underlying utility classes are purged, the entire style definition will be lost. This is particularly problematic because the styling might appear correct during development (when purging isn't active), making the bug hard to detect until the production build is generated.

Reproduction

1. Clone this repository.
2. Run npm install to install dependencies.
3. Run npm run build to build the application with purging enabled.
4. Observe the unexpected styling in the production build.

Solution

The solution involves ensuring the utility classes used in the @apply directive aren't purged, this can be achieved by:

• Explicitly including the classes in the purge configuration.
• Using Tailwind's safelist to keep classes from being purged.
• Avoiding the use of @apply in such scenarios and directly using the classes.