Tailwind Css Apply Directive Override Issue Dxmm9
Tailwind CSS @apply directive overrides custom styles with default Tailwind styles, even with specificity. This can cause unexpected styling behavior if not handled properly.
Tailwind CSS @apply Directive Override Issue
This repository demonstrates an uncommon bug related to the @apply directive in Tailwind CSS. The issue occurs when custom CSS classes containing properties that also exist in Tailwind's default styles are applied using @apply. Tailwind's defaults will override the custom styles despite order or specificity.
Steps to Reproduce
- Clone this repository.
- Open
bug.cssandbugSolution.cssto see the buggy and corrected code. - Observe how
bg-blue-500overrides thebackground-color: #ff0000in the buggy example.
Solution
The solution involves using utility-first approach or ensuring that your custom styles are more specific and avoid naming conflicts with Tailwind utilities.
