Capítulo 27 de 29
A broad grab-bag of utilities controlling how users interact with an element: form-control accents/cursors/resizing, scroll behavior (smooth scrolling, scroll-margin/padding, snap points, scrollbar styling), touch/pointer/selection behavior, and browser rendering hints (color-scheme, will-change, zoom).
Form-control coloring: accent-<color> (checkbox/radio/range tint, full palette + inherit/current/transparent), caret-<color> (text-input cursor color, same palette), color-scheme via scheme-normal/scheme-dark/scheme-light/scheme-light-dark/scheme-only-dark/scheme-only-light (hints the browser which native form-control/scrollbar theme to render — pair with dark: for a themed app).
appearance: appearance-none (strip native OS styling, e.g. before custom-styling a <select>/checkbox), appearance-auto.
field-sizing (form controls): field-sizing-fixed (default, explicit size), field-sizing-content (grows/shrinks a <textarea>/<input> to fit its content, no JS auto-resize needed).
cursor: cursor-auto/-default/-pointer/-wait/-text/-move/-help/-not-allowed/-none/-context-menu/-progress and more (full native CSS cursor keyword set), plus (<custom-property>)/[<value>] for a custom cursor image.
pointer-events: pointer-events-auto, pointer-events-none (element becomes click/hover-transparent — clicks pass through to whatever's beneath; common for disabling an overlay's interactivity while keeping it visible).
resize: resize-none, resize (both axes), resize-y, resize-x — controls whether a <textarea> (or any element with overflow set) shows a native resize handle.
Scroll behavior: scroll-auto/scroll-smooth (scroll-behavior, native smooth-scroll on anchor/programmatic navigation); scroll-m-*/scroll-p-* families mirror the full margin/padding direction-prefix grammar (Spacing chapter) but apply to scroll-margin/scroll-padding — the offset a scroll-snap container leaves around a target when snapping, useful for accounting for a sticky header.
Scroll snap: snap-x/snap-y/snap-both + snap-mandatory/snap-proximity (on the container, scroll-snap-type); snap-start/snap-end/snap-center/snap-align-none (on children, scroll-snap-align); snap-normal/snap-always (scroll-snap-stop — force a stop on every item vs. allow skipping past).
Scrollbar styling: scrollbar-thumb-<color>/scrollbar-track-<color> (scrollbar-color, full palette), scrollbar-gutter-auto/-stable/-both (reserve layout space for the scrollbar even when not overflowing, avoids content-shift when scroll appears/disappears), scrollbar-width (thin/none/auto, referenced but full row not shown above — same simple keyword pattern).
Touch & selection: touch-auto/-none/-pan-x/-pan-left/-pan-right/-pan-y/-pan-up/-pan-down/-pinch-zoom/-manipulation (touch-action, fine-grained control over which native touch gestures a browser handles vs. hands to JS); select-none/-text/-all/-auto (user-select).
Rendering hints: will-change-auto/-scroll/-contents/-transform/(<custom-property>)/[<value>] (hint the browser to optimize for an upcoming change — use sparingly, it reserves resources); zoom-<number>/(<custom-property>)/[<value>] (CSS zoom property, scales layout+content together, distinct from scale-* transform which only scales visually without affecting layout flow).
<div class="snap-x snap-mandatory overflow-x-auto">
<div class="snap-center scroll-mt-16">Slide 1</div>
<div class="snap-center scroll-mt-16">Slide 2</div>
</div>
<div class="pointer-events-none opacity-50">Loading overlay</div>
<textarea class="field-sizing-content"></textarea>
snap-* for a touch-friendly carousel with scroll-mt-* compensating for a sticky header, pointer-events-none for a visually-present-but-non-interactive overlay, and field-sizing-content replacing a common JS auto-resize pattern.scroll-m-*/scroll-p-* exist specifically to fix "scroll-snap lands behind my sticky header" — apply the offset to the snap target (scroll-mt-*), not the container.pointer-events-none + opacity-* is the standard pattern for a disabled/loading state that stays visible but stops intercepting clicks.zoom-* (CSS zoom) reflows layout at the new scale; scale-* (transform, Transforms chapter) only visually scales without affecting document flow — pick based on whether surrounding layout should shift.will-change-* sparingly and remove it once the anticipated change is done — it's a resource hint, not a free performance boost, and overuse can hurt performance.scroll-m-*/scroll-p-* mirror margin/padding's full direction grammar exactly.accent-*, caret-*, scrollbar-thumb-*/scrollbar-track-* all draw from the standard palette.scale-* is the layout-preserving alternative to zoom-*.