tailwind2-3  Exercise 1: Two Functional Utilities and a Quiet Failure
======================================================================

Setup: a folder with Tailwind installed (npm install tailwindcss @tailwindcss/cli). Create the files below, then build each CSS file with:
  npx @tailwindcss/cli -i <file>.css -o <file>.out.css

--- u.css ---
@import "tailwindcss" source(none);
@source "./tpl.html";
@theme { --tab-size-github: 8; --color-brand: oklch(0.55 0.2 260); }

@utility content-auto { content-visibility: auto; }
@utility scrollbar-hidden {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}
@utility tab-* {
  tab-size: --value(--tab-size-*);
  tab-size: --value(integer);
  tab-size: --value([integer]);
}
@utility stack-* {
  display: flex;
  flex-direction: column;
  gap: --spacing(--value(integer));
  gap: --value([length]);
}
@utility glow-* {
  box-shadow: 0 0 0 3px --value(--color-*, [color]);
}
@utility pad-x-* {
  padding-inline: --spacing(--value(integer));
  line-height: --modifier(integer);
}
@utility -nudge-* {
  translate: calc(--spacing(--value(integer)) * -1) 0;
}
@utility nudge-* {
  translate: --spacing(--value(integer)) 0;
}

--- tpl.html (classes that should work, and some that should not) ---
<i class="content-auto hover:content-auto lg:scrollbar-hidden"></i>
<i class="tab-4 tab-github tab-[12] tab-x tab-4.5"></i>
<i class="stack-3 stack-[10px] stack-[2rem] stack-x"></i>
<i class="glow-brand glow-[#f00] glow-red-500 glow-nope"></i>
<i class="pad-x-4 pad-x-4/7 pad-x-4/foo"></i>
<i class="nudge-2 -nudge-2 nudge-[3px]"></i>

--- u_bad.css is u.css with one line changed ---
  @utility glow-* { box-shadow: 0 0 0 --value([length], 3px) --value(--color-*, [color]); }

Output (the names Tailwind wrote into the utilities layer, then the broken build; the measurement of the exit code is taken without a pipe):

good file: exit code 0
  .stack-3
  .stack-\[2rem\]
  .stack-\[10px\]
  .-nudge-2
  .nudge-2
  .pad-x-4\/7
  .pad-x-4
  .tab-4
  .tab-\[12\]
  .tab-github
  .glow-\[\#f00\]
  .glow-brand
  .glow-red-500
  .content-auto
  @media (hover: hover)
    .hover\:content-auto:hover
  @media (width >= 64rem)
    .lg\:scrollbar-hidden
    .lg\:scrollbar-hidden::-webkit-scrollbar

bad file (--value([length], 3px)): exit code 0
≈ tailwindcss v4.3.3
Unsupported bare value data type: "3px".
Only valid data types are: "number", "integer", "ratio", "percentage".
```css
--value([length],3px)
                 ^^^
glow classes in the bad build: 0   stack-3 still generated: 1

WHY THIS WORKS AS AN ANSWER
---------------------------
Only values that match one of the forms in --value() produce a rule. tab-4 (integer), tab-github (a --tab-size-github theme key) and tab-[12] (arbitrary integer) are written; tab-x and tab-4.5 are not, because
x is not a theme key and 4.5 is not an integer. The same filter applies to stack-* (3 and the arbitrary lengths work; x does not) and glow-* (brand and red-500 come from the colour namespace; [#f00] is an
arbitrary colour; "nope" is nothing). --spacing(--value(integer)) turns the number into calc(var(--spacing) * n), so a stack-3 follows the project's spacing scale. The modifier works too: pad-x-4/7 sets
line-height to 7 through --modifier(integer), while pad-x-4 leaves line-height out. -nudge-2 needs its own @utility with a negative sign; the negative form is not generated from nudge-*.
The broken file shows the quiet failure: a literal like 3px is not allowed inside --value() (a bare value must be a number, integer, ratio or percentage). Tailwind prints the error but the exit code is 0
and the CSS file is still written, with that one utility missing (no glow classes) and the others fine (stack-3 is there). A script that only checks the exit code would pass this build, so in CI also
search the build output for the words "Unsupported" or "Error", or check that a known class exists in the result.