Almost all mainstream browsers these days use Chromium, with Firefox and Safari being the only exception. On the upside, this gives universal compatibility across all browsers. On the downside, one unfortunate change in Chromium affects all browsers at once, and that is exactly what is currently happening to Chrome, Edge, and other Chromium-based browsers.
Chromium 131 implemented a change to how text selection behavior works, which resulted in many websites that use Tailwind, a CSS framework, experiencing issues with highlighting and copying text. Technically speaking, it is still possible to copy something; you will just not see what exactly you are copying. Google detailed inheritance changes for CSS selection styling over a month ago, but many websites were still caught off-guard by the Chromium 131 release. Customers report problems with text selection on websites like The Verge, Bloomberg, X, and more.
Tailwind CSS creator Adam Wathan recently posted on his X a workaround that web devs should implement to fix broken text highlights. Fixing involves enabling one flag in the tailwind.config.js file or updating Tailwind to version 3.4.15:
Heads up — if all of a sudden your custom text selection colors stopped working in Chrome today (like it did on The Verge and Bloomberg 😬), enable this feature flag in your `tailwind.config.js` file or update to tailwindcss@3.4.15. pic.twitter.com/uU5paHJS4U
— Adam Wathan (@adamwathan) November 14, 2024
Adam also said in a comment under a GitHub issue that enabling the flag in the config file is the easiest and immediate solution to the problem since updating Tailwind might require more time to test everything. You can read a more detailed explanation of the issue here. If you are not a web developer and just a frustrated user trying to copy something from a website, the best thing to do is to wait or temporarily switch to Firefox or Safari. Hold tight while developers fix their websites!
2 Comments - Add comment