Tailwind just broke a TON of websites...

A recent Chrome update broke the text selection functionality on websites that utilize Tailwind CSS, specifically those using opacity variables. The issue stems from Chrome's change in how it resolves variables, which caused unexpected transparency in text highlighting. While a workaround is available, the situation highlights the challenges of relying on CSS variables and the potential for unintended consequences when browser updates introduce changes.

Chrome update broke Tailwind

• 00:00:18 A recent Chrome update (version 131) broke the custom text selection colors on many websites that utilize Tailwind CSS. Websites like The Verge and Bloomberg were affected, highlighting the widespread use of Tailwind CSS. This occurred because the update changed the behavior of the browser related to text highlighting.

Tailwind CSS issue

• 00:02:48 The issue is that if you set an opacity variable for a background color with a text selection, it resolves to transparent. Websites that use Tailwind often combine classes to set colors and adjust opacity, leading to this bug. This particular behavior is specific to Tailwind CSS, and the bug was caused by an update to Chrome.

Chrome's change in variable resolution

• 00:03:36 The root cause of the issue is a change in how Chrome handles the inheritance behavior of selection properties. Previously, it used a model where selection used properties from a matching selector. The new model (version 131) has elements inherit from their parent, breaking variable resolution in some cases. This specifically affects how Tailwind CSS applies styles when using opacity variables with text selection.

CSS variable performance

• 00:08:29 The heavy use of CSS variables in Tailwind CSS, which are prone to performance issues, may be the reason why Google was trying to optimize variable resolution. This optimization led to the breaking of text selection on websites using Tailwind CSS. The use of CSS variables in Tailwind CSS can lead to unpredictable outcomes when browsers make changes, as seen in this recent incident.

Workarounds and future implications

• 00:02:50 A temporary fix for the issue is to disable certain Tailwind utilities. The update made some assumptions about variable resolution, resulting in a bug that Tailwind users are experiencing. Chrome fixed the bug and released a new version that fixes this problem, and the issue should not be seen in future versions.