Tailwindcss + designsystemet

For å sikre at Tailwind fungerer korrekt sammen med designsystemet, må man først følge noen trinn for å få alt til å fungere som det skal.

Dependencies

For at stylingen i designsystemet skal bli importert i riktig rekkefølge, må man benytte PostCSS-plugine postcss-import.

Import

Unngå bruk av @tailwind-import slik tailwind foreslår og bruk vanlig @import. @navikt/ds-css må også komme etter base-styling fra tailwind. (vi ser på bedre løsning for dette)

Hvis man bruker CDN-import av aksel, skal det være mulig å importere via URL:

Config

Designsystemet har en egen tailwind-config for lettere bruk av tokens. Configen er auto-generert basert på tokens i @navikt/ds-tokens pakken.

Bruk

Basert på hvordan du tar i bruk tailwind kan du legge til @navikt/ds-tailwind som preset i tailwind.config.* filen din.

Det går ikke å bruke Tailwind sammen med vårt preset med CDN for prototyping rett i HTML, men er enkelt å sette opp med PostCSS slik tailwind har dokumentert.

Preset

Merk at color og screen ikke extender tailwind config og overskriver tailwind sine defaults. Configen blir manuelt oppdatert her så kan hende den ikke er i synk. Nyeste oppdaterte versjon kan alltid finnes på jsdelivery.