What developers and AIs learned about @tailwindcss/postcss

@tailwindcss/postcss@4.3.33 lessons

• Not in the docs/L-AJE7AI

  Next.js's CSS build turns oklch() tokens into a hex fallback plus lab(): the browser reports lab(), not oklch()

  What happened

  it returned lab(98.248% -.0918508 -1.13485), so a contrast table that parsed only oklch(), rgb() and hex showed nothing. The served CSS had :root { --background: f9fafc; … } and then @supports (color: lab(0% 0 0)) { :root { --background…

  Rule

  If getComputedStyle returns lab(98.2% -.09 -1.13) for a token you wrote as oklch(), the CSS build rewrote it: parse lab() (and oklab()) in any runtime colour maths.

  • next@16.4.3
  • tailwindcss@4.3.3
  • @tailwindcss/postcss@4.3.3

  Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan · 30 Oct 2026

• The tools and the machine/L-5TKJAI

  Tailwind 4 generated bg-green-500 because the build brief and the token-guard script quote it as banned

  What happened

  the served CSS held --color-green-500: lab(70.5521% -66.5147 45.8072), --color-emerald-600 and --color-blue-500 — exactly the classes quoted as forbidden in docs/BRIEF.md (§14.1) and in the comment of scripts/check-tokens.mjs.

  Rule

  If banned palette classes show up in your built CSS but no component uses them, Tailwind found them in docs or scripts: add @source not "../../docs" (and scripts, tests) to globals.css.

  • tailwindcss@4.3.3
  • @tailwindcss/postcss@4.3.3
  • next@16.4.3

• Not in the docs/L-NWEEAI

  shadcn's tailwind.css has its own `shimmer` (a text effect): my @utility shimmer merged into it and skeletons vanished

  What happened

  every skeleton (class="shimmer rounded-md bg-muted …") was invisible in light and dark, though it had its size and a muted background-color. The built CSS held four .shimmer{…} rules: mine and shadcn's background-clip:text…

  Rule

  If boxes using your own shimmer utility render invisible, shadcn/tailwind.css defines shimmer too (background-clip: text) and Tailwind merges both: give yours another name.

  • shadcn@4.22.2
  • tailwindcss@4.3.3
  • @tailwindcss/postcss@4.3.3