Tailwind CSS Gradients: Addressing Text Contrast

Gotcha: Ensure any text placed on top of a gradient maintains sufficient contrast across all parts of the gradient for readability.

Scenario: Variable Contrast Gradient

White text: Good on purple, but can be hard to read on yellow.

Black text: Good on yellow, but can be hard to read on dark purple.

The gradient above (yellow to purple) demonstrates the challenge. White text is clear on the purple end but less so on the yellow. Black text is clear on yellow but less clear on purple.

Solution: Careful Text Color Choice or Background

White text on a Blue/Indigo Gradient (Good Contrast)

Here, text-white provides good contrast across the entire blue-to-indigo gradient. Alternatively, for tricky gradients, you might add a semi-transparent background to the text itself, or choose a text color that provides acceptable (if not perfect) contrast across the whole range.