Versjon 4.0 av det populære CSS-rammeverket Tailwind CSS er lansert – og denne gangen snakker vi om en virkelig stor oppdatering.

Hele rammeverket er nemlig skrevet på nytt fra bunnen av med støtte for "alt" det nyeste av CSS-funksjonalitet – i tillegg til vesentlig bedre ytelse:

• Fullstendige bygg er opptil 5x raskere
• Inkrementelle bygg er over 100x raskere hvis det ikke er noe ny CSS. Med ny CSS er inkrementelle bygg nesten 9 ganger raskere

Det mest interessante for de fleste er imidlertid alt det nye du får i Tailwind CSS 4.0.

Her er fire ting vi liker – resten kan du lese om på Tailwind-bloggen.

#1: Støtter det nyeste

Tailwind CSS skal være "laget for den moderne weben". I praksis betyr det at rammeverket bruker cascade layers-funksjonaliteten som moderne nettlesere har hatt innebygget en stund.

Det er støtte for såkalte Registered custom properties som lar deg gjøre ting som å animere gradienter – i tillegg til at ytelsen på store sider skal bli bedre. Du kan også bruke den splitter nye CSS-funksjonen color-mix() for å endre gjennomsiktigheten (opacity) for en hvilken som helst fargeverdi – inkludert farger definert gjennom CSS-variabler.

Eksempler:

@layer theme, base, components, utilities;
@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

#2: Ingen tailwind.config-fil

I tidligere versjoner av Tailwind CSS måtte du konfigurere prosjektet ditt i en tailwind.config.js-fil.

Fra og med versjon 4.0 gjøres all konfigurasjon i CSS. Dermed kan du for eksempel konfigurere fargetemaer på denne måten i CSS-filen din:

@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

Alt blir tilgjengelig som CSS-variabler ("custom properties") du kan bruke andre steder i koden din.

– Den nye CSS-first-konfigurasjonen lar deg gjøre omtrent alt du kunne gjøre i tailwind.config.js-filen din, inkludert å konfigurere designtokenene dine, definere egne utility-klasser og varianter, og mer, skriver Adam Wathan i Tailwind CSS.

#3: Container queries

Container queries har vært en av de mest etterlengtede funksjonene i CSS, og det er rundt to år siden de fleste store nettlesere fikk støtte for det.

I versjon 4 får endelig også Tailwind CSS støtte for container queries, slik at du kan style noe basert på størrelsen til containeren elementet er i, i stedet for størrelsen på nettleservinduet.

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Les mer om hvordan du bruker dette i Tailwind CSS 4 her.

#4: Finere overganger

Tailwind CSS 4 har fått støtte for en haug med nye overganger ("gradients"), slik at du kan få til enda mer fancy effekter uten å måtte bruke CSS utover det du kan gjøre i Tailwind.

For eksempel kan du få til fargeoverganger som beveger seg på skrå i ulike vinkler, og du kan lage overganger som ser ut som kuler. Mye av dette kan kombineres.

Å lage noe som dette er en smal sak i Tailwind CSS 4:

Slik oppgraderer du

Det er ganske mange "breaking changes" i Tailwind CSS 4.0, som at det som nevnt ikke lenger brukes noen tailwind.config-fil. En del utility-klasser har også fått nye navn, så det kan hende du må gjøre noen oppdateringer her og der i koden din.

Heldigvis er en av nyhetene i v4 at installasjon og konfigurasjon har blitt enklere. Det er færre trinn enn før, og det er nå mulig å bruke Tailwind CSS enten med PostCSS eller via en Vite-plugin.

Det finnes et "codemod"-verktøy som i mange tilfeller fikser oppdateringen for deg automatisk:

npx @tailwindcss/upgrade@next

Du kan lese mer om det på denne siden.

Men vær obs på at hvis du bruker noen UI-biblioteker eller annet som bruker Tailwind CSS, så kan det hende du må vente til disse også støtter Tailwind CSS 4. Det populære UI-biblioteket HeroUI (tidligere NextUI) støtter for eksempel ikke Tailwind CSS 4 ennå – men det skal være like rundt hjørnet.

5 høydepunkter: «2024 har vært et fantastisk år!»

tirsdag 17. desember 2024