Upgrade Tailwind CSS from v3 to v4

[jsuchal]

The problem

Tailwind je na v3.3 (gem tailwindcss-rails 2.3.0). Tailwind v4 je vonku už dlho a v3 už nedostáva nové utility; dve používané pluginy (@tailwindcss/aspect-ratio, @tailwindcss/container-queries) sú vo v4 súčasťou jadra, takže ich držíme zbytočne. Navyše font Inter sa vozil cez inter-font.css z gemu 2.x, ktorý v 4.x už neexistuje — bez vyriešenia by appka po upgrade prišla o Inter a zmenil by sa font celej aplikácie.

Solution

Upgrade na Tailwind v4 (gem tailwindcss-rails ~> 4.6, CLI 4.3.3) a prechod na CSS-first konfiguráciu: app/assets/tailwind/application.css s @source/@theme/@plugin, config/tailwind.config.js zmazaný. Renamy tried v šablónach som nespravil ručne, ale oficiálnym nástrojom npx @tailwindcss/upgrade@4.1.4 (plus bin/rails tailwindcss:upgrade): flex-shrink-*→shrink-*, shadow→shadow-sm, outline-none→outline-hidden, rounded→rounded-sm, bg-opacity-*→/75, ring-opacity-5→ring-black/5 a pod.

Dve veci, ktoré nástroj nevyrieši a sú v tomto PR kľúčové:

• Tailwind v4 nečíta triedy z Ruby komentárov. Farby štítkov, boxov a výberu farby filtra sa skladajú za behu (text-#{color}-600, bg-#{color}-50, ring-#{color}-500/10), takže ich safelistujem cez @source inline(...) v application.css. Bez toho by štítky a boxy stratili farby.
• Font Inter je self-hosted (app/assets/fonts/, latin + latin-ext woff2 + OFL licencia v vendor/fonts/) a inter-font je zmazaný z oboch layoutov, keďže ho gem 4.x už nedodáva.

Pluginy @tailwindcss/aspect-ratio a @tailwindcss/container-queries vyhodené (vo v4 sú core), forms a typography bumpnuté na v4-kompatibilné. Zámerne bez dizajnovej zmeny — renami majú zachovať pôvodný vzhľad.

Overenie:

• bin/rails test:system (reálny headless Chrome) — hlavná frontend gate.
• nový test/system/frontend_assets_test.rb kontroluje vypočítané štýly premenovaných utilít (rounded-sm, shadow-xs, shrink-0, ring-black/5), že sa Inter naozaj načíta vrátane slovenskej diakritiky, a že mobilný sidebar sa dá otvoriť/zavrieť.
• bin/rails test, bin/rails test:integration a SECRET_KEY_BASE=… RAILS_ENV=production bin/rails assets:precompile.

Demo

Ide o vizuálnu zmenu konfigurácie, nie dizajnu — cieľom je, aby appka vyzerala rovnako ako predtým (vrátane Inter fontu). Overené lokálnym behom appky: zoznam vlákien so sidebarom a farebnými štítkami, detail vlákna a prihláška.

Testy na tejto vetve (Rails 7.1.6, Ruby 3.3.12):

sada	výsledok
bin/rails test	587 runs, 0 failures, 3 skips
bin/rails test:system	87 runs, 0 failures (vrátane 2 nových frontend testov)
bin/rails test:integration	137 runs, 0 failures
assets:precompile	exit 0, Inter woff2 sa digestujú a CSS na ne odkazuje

Screenshoty z lokálneho behu doplním do popisu (zoznam vlákien + detail vlákna).