Add selected variant
#2385
Add selected variant
#2385
Conversation
This commit adds the `selected` variant -- unused by default --, which allows the styling of selected/highlighted parts of the document (usually, text). This variant uses the [`::selection`](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection) pseudo-element; as such, it can only be applied to the following current Tailwind utilities: - Text color - Background color - Cursor - Text decoration The main purpose for this variant is to improve accessibility of the selection feature in certain browsers, elements and styles, such as on macOS, where eg. a non-stylized selection over a `bg-blue-400` element (`#63b3ed`) will result in a highlight background of `#9fbed4` on Chrome and an even worse `#65b2f6` on Firefox, both of which have terrible contrast by default.
|
As a side note: I've tried to add the |
|
+1 for that 👍... btw I don't think it is necessary to explicitly add |
|
I like this idea and would like to include it! Just need to dedicate some time to thinking it through deeply and making sure there are no alternate API ideas. Like select-text-blue-500 instead of a variant for example, or finding a way to be clever with CSS variables to reduce the number of generated classes. Will come back to this probably in a month or two when we wrap up some other stuff and I can dedicate some time to thinking about it. Thanks and sorry for the delay! |
|
Hey! Decided to call this |
This commit adds the
selectedvariant -- unused by default --, which allows the styling of selected/highlighted parts of the document (usually, text).This variant uses the
::selectionpseudo-element; as such, it can only be applied to the following current Tailwind utilities:The main purpose for this variant is to improve accessibility of the selection feature in certain browsers, elements and styles, such as on macOS, where eg. a non-stylized selection over a
bg-blue-400element (#63b3ed) will result in a highlight background of#9fbed4on Chrome and an even worse#65b2f6on Firefox, both of which have terrible contrast by default.