Complete Tailwind v4 migration — renamed utilities render at shifted scale #109

New issue

Closed

opened 2026-07-31 21:52:17 +02:00 by myrmidex · 0 comments

myrmidex commented

2026-07-31 21:52:17 +02:00

Owner

Summary

The project runs Tailwind 4.1.18, but a number of templates still use v3 utility names that were renamed in v4. Unlike the removed utilities in #108, these still compile — they just now mean something different, so shadows and corner radii render heavier/larger than originally designed.

This is visual drift, not breakage. Nothing is invisible or unusable.

Background

Tailwind v4 shifted the shadow, radius, and blur scales to introduce xs steps. The same class name now maps one step up from what it meant in v3:

v3 name	v4 equivalent to preserve original look
`shadow-sm`	`shadow-xs`
`shadow`	`shadow-sm`
`rounded`	`rounded-sm`
`outline-none`	`outline-hidden`

Source: Tailwind v4 upgrade guide

Affected occurrences

Counted across resources/views/:

Class	Occurrences	Change to
`shadow-sm`	23	`shadow-xs`
`shadow`	17	`shadow-sm`
`rounded`	8	`rounded-sm`
`flex-shrink-0`	2	`shrink-0`
`focus:outline-none`	throughout	`focus:outline-hidden`

flex-shrink-0 is a deprecated-but-functional alias in v4 — included here as cosmetic cleanup.

Verification method

All 349 unique classes used in resources/views/ were extracted and checked against the official v4 upgrade guide, then validated against a fresh npm run build output from Tailwind 4.1.18:

rounded, shadow, shadow-sm — confirmed PRESENT in compiled CSS (they render, at shifted scale)
shadow-xs, rounded-sm, rounded-xs, outline-hidden — confirmed MISSING (not currently used anywhere)

Confirmed clean

No occurrences of: text-opacity-*, border-opacity-*, divide-opacity-*, placeholder-opacity-*, flex-grow-*, overflow-ellipsis, decoration-slice, decoration-clone.

Why this is separate from #108

#108 covers utilities that were removed and emit no CSS at all — a functional bug (opaque modal backdrops). These renamed utilities render fine, so they do not belong in a patch release. Changing them alters the appearance of every card, button, and modal in the app, with no test coverage to catch regressions — that warrants its own review pass.

Acceptance criteria

shadow-sm → shadow-xs (23)
shadow → shadow-sm (17)
rounded → rounded-sm (8)
flex-shrink-0 → shrink-0 (2)
focus:outline-none → focus:outline-hidden
Visual pass over Dashboard, Feeds, Channels, Routes, Settings, Articles, Onboarding
Assets rebuilt; test suite green

Note on ordering

Apply after #108 ships, to keep the patch release free of cosmetic churn.

## Summary The project runs Tailwind **4.1.18**, but a number of templates still use v3 utility names that were **renamed** in v4. Unlike the removed utilities in #108, these still compile — they just now mean something different, so shadows and corner radii render heavier/larger than originally designed. This is **visual drift, not breakage**. Nothing is invisible or unusable. ## Background Tailwind v4 shifted the shadow, radius, and blur scales to introduce `xs` steps. The same class name now maps one step up from what it meant in v3: | v3 name | v4 equivalent to preserve original look | |---|---| | `shadow-sm` | `shadow-xs` | | `shadow` | `shadow-sm` | | `rounded` | `rounded-sm` | | `outline-none` | `outline-hidden` | Source: [Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) ## Affected occurrences Counted across `resources/views/`: | Class | Occurrences | Change to | |---|---|---| | `shadow-sm` | 23 | `shadow-xs` | | `shadow` | 17 | `shadow-sm` | | `rounded` | 8 | `rounded-sm` | | `flex-shrink-0` | 2 | `shrink-0` | | `focus:outline-none` | throughout | `focus:outline-hidden` | `flex-shrink-0` is a deprecated-but-functional alias in v4 — included here as cosmetic cleanup. ## Verification method All 349 unique classes used in `resources/views/` were extracted and checked against the official v4 upgrade guide, then validated against a fresh `npm run build` output from Tailwind 4.1.18: - `rounded`, `shadow`, `shadow-sm` — confirmed **PRESENT** in compiled CSS (they render, at shifted scale) - `shadow-xs`, `rounded-sm`, `rounded-xs`, `outline-hidden` — confirmed **MISSING** (not currently used anywhere) ## Confirmed clean No occurrences of: `text-opacity-*`, `border-opacity-*`, `divide-opacity-*`, `placeholder-opacity-*`, `flex-grow-*`, `overflow-ellipsis`, `decoration-slice`, `decoration-clone`. ## Why this is separate from #108 #108 covers utilities that were **removed** and emit no CSS at all — a functional bug (opaque modal backdrops). These renamed utilities render fine, so they do not belong in a patch release. Changing them alters the appearance of every card, button, and modal in the app, with no test coverage to catch regressions — that warrants its own review pass. ## Acceptance criteria - [ ] `shadow-sm` → `shadow-xs` (23) - [ ] `shadow` → `shadow-sm` (17) - [ ] `rounded` → `rounded-sm` (8) - [ ] `flex-shrink-0` → `shrink-0` (2) - [ ] `focus:outline-none` → `focus:outline-hidden` - [ ] Visual pass over Dashboard, Feeds, Channels, Routes, Settings, Articles, Onboarding - [ ] Assets rebuilt; test suite green ## Note on ordering Apply **after** #108 ships, to keep the patch release free of cosmetic churn.