tailwind1-8  Exercise 3: Respecting User Preferences
====================================================

<div id="spin" class="animate-spin motion-reduce:animate-none size-4 bg-blue-500"></div>

<div id="ct" class="border-0 border-gray-400 p-1 contrast-more:border-2">card</div>

<div id="pr" class="print:hidden">decorative banner</div>

<div id="fc" class="p-1 forced-colors:p-8">button</div>

  animate-spin motion-reduce:animate-none   spins by default; no animation when the visitor has asked for reduced motion
  border-0 contrast-more:border-2           no border normally; a 2px border when more contrast is requested
  print:hidden                              display none in print
  p-1 forced-colors:p-8                     4px of padding normally; 32px when the browser is in forced-colours mode

How to test without changing your system: DevTools > Rendering > Emulate CSS media feature (prefers-reduced-motion, prefers-contrast, forced-colors) and Emulate CSS media type: print.
Then read the computed values in the Computed panel, or in the console:

  const cs = id => getComputedStyle(document.getElementById(id));
  console.log(cs('spin').animationName, cs('ct').borderTopWidth, cs('pr').display, cs('fc').paddingTop);

Measured by emulating each setting in headless Chrome:

  preference                                           before                  after
  prefers-reduced-motion: no-preference -> reduce      animation-name: spin    animation-name: none
  prefers-contrast: no-preference -> more              border-top-width: 0px   border-top-width: 2px
  forced-colors: none -> active                        padding-top: 4px        padding-top: 32px
  media type: screen -> print                          display: block          display: none

WHY THIS WORKS AS AN ANSWER
---------------------------
Each variant is only a media query around the same declaration, so the browser does the work as soon as the matching setting changes: no JavaScript and no reload.
For motion, the more robust style is to state the animation as the exception: motion-safe:animate-spin applies it only when the visitor has NOT asked for less. I measured that variant on a pulsing
element: it animated with no preference and stopped (animation none) when reduction was requested. Writing animate-spin motion-reduce:animate-none, as here, reaches the same result for one element,
but forgetting the motion-reduce half on a new animated element is easy, which is the argument for the motion-safe form.
The forced-colours padding is only an example of "something changes in this mode". The real use is giving shapes an outline or border when the browser replaces your colours with system colours
(not measured here: I verified that the variant applies, not how the page looks in the mode).