Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Tailwind

StabilOppdatert 3. juli 2025

Tailwind v4

Ved å legge Aksel i layer(components) , vil utilities som mb-4 kunne overskrive styling fra Aksel. Docs. Man må også importere config med @config.

TSX
@import "tailwindcss";
@import "@navikt/ds-css" layer(components);
@config '../tailwind.config.js';

Tailwind v3

Dependencies

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

postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss": {},
"autoprefixer": {},
},
};

Import

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

Index.css
@import "tailwindcss/base";
@import "@navikt/ds-css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

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.*.

TERMINAL
// yarn
yarn add @navikt/ds-tailwind
// npm
npm install @navikt/ds-tailwind
Kode
// tailwind.config.js
module.exports = {
presets: [require("@navikt/ds-tailwind")]
}

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.