User Preference Variants | Tailwind

Tailwind provides variants for responding to user preferences and system settings, keeping adaptive styles right in your HTML.

Dark Mode

Basic usage:

Adapts to dark mode

<div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">Adapts to dark mode</div>

Manual theme switching: Configure dark mode to use a selector instead of system preference:

Controlled by data-theme

<div data-theme="dark">
  <div class="dark:bg-gray-800">Controlled by data-theme</div>
</div>

Motion Preferences

Reduce animations for accessibility:

<!-- Disable animation when reduced motion preferred -->
<div class="animate-spin motion-reduce:animate-none">Loading...</div>

<!-- Only animate when motion is safe -->
<button class="motion-safe:transition motion-safe:hover:scale-105">Hover me</button>

Contrast and Colors

High contrast modes:

<button class="border-gray-300 contrast-more:border-black contrast-less:border-gray-200">
  Adapts to contrast preference
</button>

Forced colors (Windows High Contrast):

Uses system colors in forced-colors mode

<div class="bg-blue-500 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">
  Uses system colors in forced-colors mode
</div>

Input Methods

Adapt to pointing devices:

Hover only with mouse

<!-- Larger targets for touch -->
<button class="p-2 pointer-coarse:p-4">Touch-friendly button</button>

<!-- Fine interactions for mouse users -->
<div class="pointer-fine:hover:underline">Hover only with mouse</div>

Note: In Tailwind 4, hover: only applies when primary device supports hover.

Other Preferences

Orientation:

Responsive to orientation

<div class="grid-cols-1 landscape:grid-cols-2">Responsive to orientation</div>

Print styling:

Print-friendly content

<nav class="print:hidden">Navigation</nav>
<article class="print:bg-white print:text-black">Print-friendly content</article>

JavaScript detection:

<noscript class="hidden noscript:block"> Please enable JavaScript </noscript>

Feature Detection

CSS feature support:

Uses grid if supported

Advanced grid features

<!-- Basic support check -->
<div class="supports-[display:grid]:grid">Uses grid if supported</div>

<!-- Complex queries -->
<div class="supports-[(display:grid)_and_(gap:1rem)]:grid-flow-col">Advanced grid features</div>

Custom feature shortcuts:

@theme {
  --supports-container-queries: [(container-type: inline-size)];
}

Starting Styles (v4)

Animate elements when they first appear:

Fades in on appearance

<div class="transition-opacity duration-300 starting:opacity-0">Fades in on appearance</div>

Best Practices

Always provide fallbacks - Don’t rely solely on preference variants
Test all modes - Check dark mode, reduced motion, etc.
Use semantic system colors for forced-colors mode
Remember class detection - Complete class names must exist in source