Tailwind

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.

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

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.

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

I versjon 8 er alle farger og verdier oppdatert til å bruke css-variabler, som betyr at theming fungerer ut av boksen, uten at du måtte trenge å bruke dark: prefix. Som konsekvens betyr det at du ikke kan manipulere verdiene i tailwind. F.eks red-500/50 for 50% opacity er ikke mulig.

Bruk

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

// yarn
yarn add @navikt/ds-tailwind

// npm
npm install @navikt/ds-tailwind

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.