Grunnleggende
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.
Bruk
Legg til @navikt/ds-tailwind
som preset i tailwind.config.*
.
// yarnyarn add @navikt/ds-tailwind
// npmnpm install @navikt/ds-tailwind
// 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.