Tailwind CSS + Aksel

Tailwind v4

Ved å legge Aksel i layer(components) , vil utilities som mb-4 kunne overskrive styling fra Aksel. Docs.

Tailwind v3

Dependencies

For at stylingen fra Aksel skal bli importert i riktig rekkefølge, må man benytte PostCSS-plugin: postcss-import.

Import

Unngå bruk av @tailwind-import slik tailwind foreslår og bruk @import. @navikt/ds-css må også komme etter base-styling fra tailwind.

Config

Aksel har en egen tailwind config for bruk av tokens. Configen er auto-generert basert på @navikt/ds-tokens pakken vår.

Bruk

Legg til @navikt/ds-tailwind som preset i tailwind.config.*.

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

Merk at color og screen ikke extender tailwind config og overskriver tailwind sine defaults.

Tailwind v4

I tailwind v4 må man importere config med @config.