User Select
Controls the ability of the user to select text in an element.
Limited availability
This feature does not work in some of the most widely-used browsers.
us-auser-select: all;us-autouser-select: auto;us-noneuser-select: none;us-tuser-select: text;Auto
Initial value
Allows the browser to determine the default highlighting behavior based on the element's content.
<p class="fs-lg c-slate us-auto">Sphinx of black quartz, judge my vow.</p>All
Allows the user to select all text within the element when clicked or dragged over.
<p class="fs-lg c-slate us-a">Sphinx of black quartz, judge my vow.</p>None
Prevents the user from selecting any text within the element.
<p class="fs-lg c-slate us-none">Sphinx of black quartz, judge my vow.</p>Text
Allows the user to select text within the element, enabling text highlighting while preventing highlighting of other elements.
<p class="fs-lg c-slate us-t">Sphinx of black quartz, judge my vow.</p>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Responsive design
Target different screen sizes by adding breakpoint prefixes. Styles apply from the specified breakpoint and up.
Target specific viewport sizes with breakpoint prefixes
sm:us-[value]md:us-[value]lg:us-[value]xxl:us-[value]Hover state variant
Apply styles conditionally when users hover over an element using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
h:us-[value]