Replies: 2 comments 1 reply
-
If you look in the Generated CSS, you'll see the following generated rules that are the main focus of your discussion: .selection\:text-red-900 *::selection {
--tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity));
}
.selection\:text-white *::selection {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
} The In Tailwind v2, the generated rules would be: .selection\:text-white::selection {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.selection\:text-red-900::selection {
--tw-text-opacity: 1;
color: rgba(127, 29, 29, var(--tw-text-opacity));
} The rule selectors and the order of the rules are different which is why it behaves as you'd like in v2. |
Beta Was this translation helpful? Give feedback.
-
I totally like your gave limits as the post you passed on has some uncommon information which is totally essential for me. |
Beta Was this translation helpful? Give feedback.
-
Hi community,
I might be wrong, but according the docs the inheritance of the
selection
-modifier might be able to re-style highlighted text for child elements in common. It at least did so in previous version (2.x
). But again, I might have misunderstood the docs 🙃.Did some tests here and from my understanding variant
A)
should inheritselection:text-red-900
. IMHO it shouldn't be necessary to do the "tricks" used in variantB)
andC)
.Maybe some of you have a useful hint for me ❤️
Beta Was this translation helpful? Give feedback.
All reactions