tailwind2-8  Exercise 3: Audit Old and New Class Names, Test the Traps, Run Both Versions
==================================================================================

Setup: a folder with   npm install tailwindcss @tailwindcss/cli   and a.css containing  @import "tailwindcss";

--- p.html (all names on one element) ---
<div class="bg-opacity-50 text-opacity-50 flex-grow flex-shrink-0 overflow-ellipsis decoration-slice shadow shadow-sm shadow-xs rounded rounded-sm rounded-xs blur blur-xs outline-none outline-hidden ring ring-3 bg-gradient-to-r bg-linear-to-r transform !flex flex! bg-[--brand] bg-(--brand) grid-cols-[1fr,2fr] grid-cols-[1fr_2fr]"></div>

node node_modules/@tailwindcss/cli/dist/index.mjs -i a.css -o o.css ; then print the rule for each class. (My first script, a regex over o.css, wrongly printed "NO RULE" for !flex, flex!, bg-(--brand) and bg-[--brand];
a plain  grep -n 'brand\|flex\\!\|grid-cols' o.css  showed they exist. Always re-check a "missing" with grep.)

Results, Tailwind 4.3.3:
bg-opacity-50, text-opacity-50   no rule
flex-grow                        flex-grow: 1;                  (still generated)
flex-shrink-0                    flex-shrink: 0;                (still generated)
overflow-ellipsis                text-overflow: ellipsis;       (still generated)
decoration-slice                 box-decoration-break: slice;   (still generated)
shadow = shadow-sm               0 1px 3px 0 ..., 0 1px 2px -1px ...   (the old "shadow")
shadow-xs                        0 1px 2px 0 ... 0.05           (the old "shadow-sm")
rounded                          border-radius: 0.25rem ; rounded-sm: var(--radius-sm) ; rounded-xs: var(--radius-xs)
blur / blur-xs                   both exist
outline-none                     outline-style: none ; outline-hidden adds a forced-colors fallback
ring                             1px, var(--tw-ring-color, currentcolor) ; ring-3: 3px, same colour
bg-gradient-to-r / bg-linear-to-r  both exist
transform                        transform: var(--tw-rotate-x,) ... (no scale/translate in it)
!flex and flex!                  display: flex !important (both)
bg-[--brand]                     background-color: --brand;     (INVALID CSS)
bg-(--brand)                     background-color: var(--brand);
grid-cols-[1fr,2fr]              grid-template-columns: 1fr,2fr (INVALID)
grid-cols-[1fr_2fr]              grid-template-columns: 1fr 2fr

Traps:
(1) old.css = the three  @tailwind base/components/utilities  lines, markup class="p-4 text-red-500"
    node .../index.mjs -i old.css -o old.out.css      exit 0, "Done in 344ms", the output is 66 bytes, 0 rules for text-red-500
(2) ap.css:  @import "tailwindcss";  .x { @apply bg-opacity-50 p-2; }
    exit 1   Error: Cannot apply unknown utility class `bg-opacity-50`
(3) th.css:  .y { color: theme(colors.red.500); width: theme(spacing.4); border-color: theme(borderColor.DEFAULT); }
    ->  color: oklch(63.7% 0.237 25.331); width: 1rem; border-color: currentcolor

Side by side:
  npm install tailwind3@npm:tailwindcss@3.4.19 tailwindcss@4 @tailwindcss/cli@4
  new/in.css = @import "tailwindcss";      old/in.css = @tailwind utilities;      old/tw3.config.js = module.exports={content:["./index.html"]}
  markup  <p class="shadow-sm rounded bg-red-500 p-4">
  node node_modules/@tailwindcss/cli/dist/index.mjs -i new/in.css -o new/out.css
  node node_modules/tailwind3/lib/cli.js -c old/tw3.config.js -i old/in.css -o old/out.css
  v3 .shadow-sm : --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)
  v4 .shadow-sm : --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1))

WHY THIS WORKS AS AN ANSWER
---------------------------
The table shows what the v4 build actually does with old names, which is more useful than the documentation's list. Two surprises against the upgrade guide: flex-grow, flex-shrink-0, overflow-ellipsis and decoration-slice are listed
there as removed in 4.0 yet still produced rules in 4.3.3; I did not find out whether that is intended, so rename them anyway. The dangerous ones are the silent ones: bg-opacity-* has no rule, shadow-sm quietly became larger
(its old look is now shadow-xs), and bg-[--brand] and grid-cols-[1fr,2fr] build into invalid declarations that the browser drops. Trap 1 is the most severe: v3 directives in a v4 build do not fail, they give an almost empty stylesheet,
so after any migration always check that a known class has a rule. The alias install proves two versions can coexist in one package.json, and the shadow-sm outputs show why they must not process the same templates.