Tailwind Css Gradient Utility Silent Failure On Incomplete Definitions 9231q
Tailwind CSS gradient utility silently ignores incomplete gradient definitions, resulting in unexpected solid colors instead of gradients.
Tailwind CSS Gradient Bug
This repository demonstrates a subtle bug in Tailwind CSS's gradient utility classes. When defining a linear gradient using the bg-gradient-to-* utilities, omitting the second (or subsequent) color results in unexpected behavior. Instead of throwing an error or warning, Tailwind silently defaults to the first color, rendering a solid color instead of a gradient.
How to Reproduce
- Clone this repository.
- Open
bug.jsand examine the code. - Note that the
divelement intended to have a gradient background only shows a solid blue color. - Open
bugSolution.jsto see a corrected version that uses a proper gradient definition.
Solution
Always ensure that you provide at least two colors when defining a gradient with Tailwind. If you intend to have a single color, use the standard background color utilities.
