Interactivity, SVG, and Accessibility

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

A grab-bag of utilities that control how an element behaves under pointer, keyboard, and scroll, how inline SVG is coloured, and how content is exposed to assistive technology. See Cursor, Fill, and Screen Readers.

Interactivity

<!-- native control accents -->
<input type="checkbox" class="accent-sky-600" />
<input type="text" class="caret-pink-500" />
<select class="appearance-none">strip the native chrome</select>
<div class="color-scheme-dark">form controls render dark</div>

<!-- pointer + sizing -->
<button class="cursor-pointer disabled:cursor-not-allowed">click</button>
<textarea class="field-sizing-content">grows with its content</textarea>
<div class="pointer-events-none">clicks pass through</div>
<textarea class="resize-y"></textarea>

<!-- scrolling -->
<html class="scroll-smooth">anchor jumps animate</html>
<section class="scroll-mt-16" id="pricing">offsets a sticky header</section>

<!-- scroll snap -->
<div class="snap-x snap-mandatory overflow-x-auto flex">
  <div class="snap-center shrink-0 w-80">slide</div>
  <div class="snap-center shrink-0 w-80">slide</div>
</div>

<!-- touch, selection, compositing hint -->
<div class="touch-pan-y">only vertical panning</div>
<p class="select-none">not selectable</p>
<pre class="select-all">click selects the whole block</pre>
<div class="will-change-transform">promoted for animation</div>

See Scroll Snap Type and Field Sizing.

SVG

fill- and stroke- take palette colours (and fill-current / stroke-current for currentColor), so an inline icon inherits the surrounding text colour and reacts to variants:

<button class="text-gray-500 hover:text-sky-600">
  <svg class="size-5 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
    <path d="M5 12h14" />
  </svg>
</button>

<svg class="fill-sky-500"><circle cx="12" cy="12" r="10" /></svg>

See Stroke Width.

Accessibility

<!-- visually hidden, still announced by screen readers -->
<a href="/cart">
  <svg class="size-6">&#8230;</svg>
  <span class="sr-only">View cart</span>
</a>

<!-- reveal a visually-hidden element on focus (skip links) -->
<a href="#main" class="sr-only focus:not-sr-only">Skip to content</a>

<!-- opt an element out of Windows High Contrast remapping -->
<div class="forced-color-adjust-none bg-linear-to-r from-sky-500 to-indigo-500"></div>

Pair these with the preference variants from the states page — motion-reduce:, contrast-more:, forced-colors: — to adapt the UI to user settings. See Forced Color Adjust.

Related pages