Tailwind CSS 4.1: Nové utility, maskování, lepší kompatibilita a další.

Tailwind CSS verze 4.1 je venku a opět se rozrůstá o další řadu novinek. Přináší nám nejen dlouho očekávané utility třídy pro textové stíny a novinku maskování, ale i řadu dalších vylepšení, která usnadní práci a přesune opět další část psaní klasického CSS kódu do oblíbených tříd. Také se zlepšuje podpora pro starší prohlížeče a novinkou je také ovlivnění toho, co se do výsledných stylů dostane.

Co je tedy nového?

• Textové stíny (text-shadow-*) – po letech čekání přichází podpora pro jednoduché vytváření textových stínů.
• Maskování obrázků (mask-*) – nová API umožňuje využití obrázky a přechody k maskování obsahu.
• Lepší podpora starších prohlížečů – plynulejší degradace funkcí při zachování moderních výhod.
• Chytřejší zalamování textů (overflow-wrap) – ochrana rozvržení před extrémně dlouhými slovy.
• Barevné varianty stínů (drop-shadow-*) – podpora pro barevné stíny je po letech konečně tu.
• Responzivita podle vstupního zařízení (pointer-*) – možnost cílit na dotyková zařízení bez ohledu na velikost obrazovky.
• Zarovnání na poslední řádek textu – nové utility items-baseline-last a self-baseline-last.
• Bezpečné centrování obsahu (justify-center-safe) – zarovnání, které nezpůsobí zmizení obsahu při nedostatku místa.
• Vylepšená správa zdrojových cest (@source not a @source inline(...)) – lepší kontrola nad tím, co obsahuje výsledný build.
• Nové varianty – například noscript, user-valid nebo inverted-colors.

Pokud si chcete Tailwind CSS 4.1 vyzkoušet, můžete začít nový projekt nebo si ho otestovat přímo v prohlížeči na Tailwind Play.

Pro stávající projekty je potřeba aktualizovat závislosti Tailwind CSS na novou verzi 4.1.