Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove opacity variables from :visited pseudo class #7458

merged 3 commits into from Feb 14, 2022


Copy link

The :visited pseudo-class has significant restrictions on what can be done with it for privacy reasons. You can read more about the limitations on the MDN article Privacy and the :visited selector.

Some examples:

  1. Any declarations that use var() are discarded (discovered this one via testing)
  2. Opacity changes to color/background color/etc are not applied — it preserves the opacity from the non-:visited version of the element/class.
  3. You can only apply a :visited color if a color has already been set on the base property.
  4. There are significant limitations on what properties can actually be applied to a :visited link.

Tailwind CSS, by default, generates text opacity, border opacity, and background opacity variables that are used when applying the text-{color}, border-{color}, and bg-{color} utilities. This causes the utility to not work at all because the relevant color declaration is being treated as if it wasn't there at all.

You can disable those plugins (which aren't necessary given that the color modifier syntax now exists) to work around the issue however it makes more sene for Tailwind CSS to handle this itself if/when it is feasible.

Fixes #7441

@thecrypticace thecrypticace merged commit f116f9f into master Feb 14, 2022
@thecrypticace thecrypticace deleted the fix/visited-no-opacity branch February 14, 2022 18:24
tmattio added a commit to tmattio/opam-repository that referenced this pull request Apr 9, 2022

### Fixed

- Remove opacity variables from `:visited` pseudo class ([tmattio/opam-tailwindcss#7458](tailwindlabs/tailwindcss#7458))
- Support arbitrary values + calc + theme with quotes ([tmattio/opam-tailwindcss#7462](tailwindlabs/tailwindcss#7462))
- Don't duplicate layer output when scanning content with variants + wildcards ([tmattio/opam-tailwindcss#7478](tailwindlabs/tailwindcss#7478))
- Implement `getClassOrder` instead of `sortClassList` ([tmattio/opam-tailwindcss#7459](tailwindlabs/tailwindcss#7459))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

Visited classes are not generated
1 participant