<div class="text-balance text-pretty"></div> produces a warning
#1535
-
|
Like the title says, this produces warning. But actually this class name is quite useful, as Surely one can workaround this warning via something like |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
The warning appears because Tailwind CSS IntelliSense detects a CSS conflict. Both utilities set the same property:
Since they target the same CSS property, the extension assumes one will override the other and reports a Your fallback idea is valid though: A cleaner way to implement this without triggering the conflict warning is to use a <div class="text-balance supports-[text-wrap:pretty]:text-pretty"></div>This works as follows:
This preserves the progressive enhancement behavior while avoiding the IntelliSense conflict warning. |
Beta Was this translation helpful? Give feedback.
The warning appears because Tailwind CSS IntelliSense detects a CSS conflict.
Both utilities set the same property:
text-balance→text-wrap: balancetext-pretty→text-wrap: prettySince they target the same CSS property, the extension assumes one will override the other and reports a
cssConflict.Your fallback idea is valid though:
text-prettyis not fully supported in Firefox yet, so usingtext-balanceas a fallback makes sense.A cleaner way to implement this without triggering the conflict warning is to use a
supportsvariant so the utilities don’t apply at the same time:This works as follows:
text-balancei…