tailwind1-10  Exercise 2: Your Own Utilities and Variants
==========================================================

input.css:

  @import "tailwindcss";

  @theme {
    --tab-size-github: 8;
  }

  @utility scrollbar-hidden {
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  @utility tab-* {
    tab-size: --value(--tab-size-*, integer, [integer]);
  }

  .my-element {
    background: white;
    @variant dark { background: black; }
    @variant hover { background: red; }
  }

page.html:

  <div class="scrollbar-hidden">…</div>
  <div class="hover:scrollbar-hidden">…</div>
  <pre class="tab-4">…</pre>
  <pre class="tab-github">…</pre>
  <pre class="tab-[3]">…</pre>
  <pre class="md:tab-2">…</pre>
  <div class="my-element">…</div>

Measured in Chrome:

  scrollbar-width
    scrollbar-hidden                none
    hover:scrollbar-hidden          auto at rest, none while hovered

  tab-size
    tab-4                           4
    tab-github                      8
    tab-[3]                         3
    md:tab-2                        4 at a 700px viewport, 2 at 800px

  .my-element background
    system light                    rgb(255, 255, 255)
    system dark (emulated)          rgb(0, 0, 0)
    pointer over it                 rgb(255, 0, 0)

WHY THIS WORKS AS AN ANSWER
---------------------------
@utility registers the class with Tailwind's own machinery, so the variants (hover:, md:) apply to it automatically with no extra work; the hover version was compiled inside a (hover: hover)
media query, and the measurement shows it switching only while hovered. In the functional utility the * stands for whatever follows the dash, and --value() lists what is allowed, tried in order: a
theme variable matching --tab-size-* (github), a bare integer (4), or a bracketed integer ([3]). @variant is the reverse of @custom-variant: it lets your own plain CSS use a Tailwind variant,
and it expands into the same media queries Tailwind would have generated, so the dark rule follows the system setting and the hover rule only fires on devices that can hover.