Tilbake til forsidenDesignsystemet

Tailwind

Oppdatert 20. mai 2022

Designsystemet har en egen tailwind-config for lettere bruk av alle våre tokens. Selve configen er 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 en preset i tailwind.config.* filen din.

// tailwind.config.js


module.exports = {
  presets: [require("@navikt/ds-tailwind")]
}

Det går dessverre ikke å bruke Tailwind + vår preset med CDN for eks prototyping rett i HTML, men er relativt enkelt å sette opp med postcss slik tailwind har dokumentert åpner lenken i ny fane.

Config

Merk at color ikke extender tailwind config og overskriver da tailwind sine standard-farger. Configen blir manuelt oppdatert her så kan hende den ikke er i synk. Nyeste oppdaterte versjon kan finnes på jsdelivery åpner lenken i ny fane.

module.exports = {
  "theme": {
    "colors": {
      "blue-50": "rgba(230, 240, 255, 1)",
      "blue-100": "rgba(204, 225, 255, 1)",
      "blue-200": "rgba(153, 195, 255, 1)",
      "blue-300": "rgba(102, 165, 244, 1)",
      "blue-400": "rgba(51, 134, 224, 1)",
      "blue-500": "rgba(0, 103, 197, 1)",
      "blue-600": "rgba(0, 86, 180, 1)",
      "blue-700": "rgba(0, 69, 156, 1)",
      "blue-800": "rgba(0, 52, 125, 1)",
      "blue-900": "rgba(0, 34, 82, 1)",
      "deepblue-50": "rgba(230, 241, 248, 1)",
      "deepblue-100": "rgba(204, 226, 240, 1)",
      "deepblue-200": "rgba(153, 196, 221, 1)",
      "deepblue-300": "rgba(102, 163, 196, 1)",
      "deepblue-400": "rgba(51, 128, 165, 1)",
      "deepblue-500": "rgba(0, 91, 130, 1)",
      "deepblue-600": "rgba(0, 80, 119, 1)",
      "deepblue-700": "rgba(0, 67, 103, 1)",
      "deepblue-800": "rgba(0, 52, 83, 1)",
      "deepblue-900": "rgba(0, 36, 58, 1)",
      "gray-50": "rgba(247, 247, 247, 1)",
      "gray-100": "rgba(241, 241, 241, 1)",
      "gray-200": "rgba(229, 229, 229, 1)",
      "gray-300": "rgba(207, 207, 207, 1)",
      "gray-400": "rgba(176, 176, 176, 1)",
      "gray-500": "rgba(143, 143, 143, 1)",
      "gray-600": "rgba(112, 112, 112, 1)",
      "gray-700": "rgba(89, 89, 89, 1)",
      "gray-800": "rgba(64, 64, 64, 1)",
      "gray-900": "rgba(38, 38, 38, 1)",
      "green-50": "rgba(243, 252, 245, 1)",
      "green-100": "rgba(204, 241, 214, 1)",
      "green-200": "rgba(153, 222, 173, 1)",
      "green-300": "rgba(102, 199, 134, 1)",
      "green-400": "rgba(51, 170, 95, 1)",
      "green-500": "rgba(6, 137, 58, 1)",
      "green-600": "rgba(0, 124, 46, 1)",
      "green-700": "rgba(0, 106, 35, 1)",
      "green-800": "rgba(0, 85, 25, 1)",
      "green-900": "rgba(0, 59, 15, 1)",
      "lightblue-50": "rgba(235, 252, 255, 1)",
      "lightblue-100": "rgba(216, 249, 255, 1)",
      "lightblue-200": "rgba(181, 241, 255, 1)",
      "lightblue-300": "rgba(151, 230, 255, 1)",
      "lightblue-400": "rgba(124, 218, 248, 1)",
      "lightblue-500": "rgba(102, 203, 236, 1)",
      "lightblue-600": "rgba(76, 173, 205, 1)",
      "lightblue-700": "rgba(54, 141, 168, 1)",
      "lightblue-800": "rgba(35, 107, 125, 1)",
      "lightblue-900": "rgba(19, 72, 82, 1)",
      "limegreen-50": "rgba(253, 255, 230, 1)",
      "limegreen-100": "rgba(249, 252, 204, 1)",
      "limegreen-200": "rgba(236, 243, 153, 1)",
      "limegreen-300": "rgba(217, 227, 102, 1)",
      "limegreen-400": "rgba(193, 203, 51, 1)",
      "limegreen-500": "rgba(162, 173, 0, 1)",
      "limegreen-600": "rgba(147, 158, 0, 1)",
      "limegreen-700": "rgba(127, 137, 0, 1)",
      "limegreen-800": "rgba(102, 110, 0, 1)",
      "limegreen-900": "rgba(71, 78, 0, 1)",
      "nav-red": "rgba(195, 0, 0, 1)",
      "orange-50": "rgba(255, 249, 240, 1)",
      "orange-100": "rgba(255, 236, 204, 1)",
      "orange-200": "rgba(255, 215, 153, 1)",
      "orange-300": "rgba(255, 193, 102, 1)",
      "orange-400": "rgba(255, 170, 51, 1)",
      "orange-500": "rgba(255, 145, 0, 1)",
      "orange-600": "rgba(212, 123, 0, 1)",
      "orange-700": "rgba(168, 100, 0, 1)",
      "orange-800": "rgba(125, 76, 0, 1)",
      "orange-900": "rgba(82, 51, 0, 1)",
      "purple-50": "rgba(239, 236, 244, 1)",
      "purple-100": "rgba(224, 216, 233, 1)",
      "purple-200": "rgba(192, 178, 210, 1)",
      "purple-300": "rgba(161, 141, 187, 1)",
      "purple-400": "rgba(130, 105, 162, 1)",
      "purple-500": "rgba(99, 70, 137, 1)",
      "purple-600": "rgba(82, 56, 116, 1)",
      "purple-700": "rgba(65, 43, 93, 1)",
      "purple-800": "rgba(48, 31, 70, 1)",
      "purple-900": "rgba(31, 20, 47, 1)",
      "red-50": "rgba(253, 232, 230, 1)",
      "red-100": "rgba(249, 210, 204, 1)",
      "red-200": "rgba(239, 168, 157, 1)",
      "red-300": "rgba(225, 128, 113, 1)",
      "red-400": "rgba(208, 92, 74, 1)",
      "red-500": "rgba(186, 58, 38, 1)",
      "red-600": "rgba(163, 42, 23, 1)",
      "red-700": "rgba(136, 29, 12, 1)",
      "red-800": "rgba(106, 18, 4, 1)",
      "red-900": "rgba(72, 9, 0, 1)",
      "transparent": "rgba(255, 255, 255, 0)",
      "white": "rgba(255, 255, 255, 1)",
      "border-inverted": "rgba(229, 229, 229, 1)",
      "border-muted": "rgba(143, 143, 143, 1)",
      "border": "rgba(112, 112, 112, 1)",
      "canvas-background-inverted": "rgba(38, 38, 38, 1)",
      "canvas-background-light": "rgba(255, 255, 255, 1)",
      "canvas-background": "rgba(241, 241, 241, 1)",
      "component-background-alternate": "rgba(247, 247, 247, 1)",
      "component-background-inverted": "rgba(38, 38, 38, 1)",
      "component-background-light": "rgba(255, 255, 255, 1)",
      "divider": "rgba(229, 229, 229, 1)",
      "feedback-danger-background": "rgba(249, 210, 204, 1)",
      "feedback-danger-border": "rgba(186, 58, 38, 1)",
      "feedback-danger-icon": "rgba(186, 58, 38, 1)",
      "feedback-danger-text": "rgba(186, 58, 38, 1)",
      "feedback-info-background": "rgba(216, 249, 255, 1)",
      "feedback-info-border": "rgba(54, 141, 168, 1)",
      "feedback-info-icon": "rgba(54, 141, 168, 1)",
      "feedback-success-background": "rgba(204, 241, 214, 1)",
      "feedback-success-border": "rgba(6, 137, 58, 1)",
      "feedback-success-icon": "rgba(0, 124, 46, 1)",
      "feedback-warning-background": "rgba(255, 236, 204, 1)",
      "feedback-warning-border": "rgba(212, 123, 0, 1)",
      "feedback-warning-icon": "rgba(212, 123, 0, 1)",
      "focus-inverted": "rgba(102, 165, 244, 1)",
      "focus": "rgba(0, 52, 125, 1)",
      "interaction-danger-hover": "rgba(163, 42, 23, 1)",
      "interaction-danger-selected": "rgba(136, 29, 12, 1)",
      "interaction-danger": "rgba(186, 58, 38, 1)",
      "interaction-primary-hover-subtle": "rgba(230, 240, 255, 1)",
      "interaction-primary-hover": "rgba(0, 86, 180, 1)",
      "interaction-primary-selected": "rgba(0, 91, 130, 1)",
      "interaction-primary": "rgba(0, 103, 197, 1)",
      "link-visited": "rgba(99, 70, 137, 1)",
      "link": "rgba(0, 103, 197, 1)",
      "text-inverted": "rgba(255, 255, 255, 1)",
      "text-muted": "rgba(112, 112, 112, 1)",
      "text": "rgba(38, 38, 38, 1)"
    },
    "extend": {
      "spacing": {
        "1": "0.25rem",
        "2": "0.5rem",
        "3": "0.75rem",
        "4": "1rem",
        "5": "1.25rem",
        "6": "1.5rem",
        "7": "1.75rem",
        "8": "2rem",
        "9": "2.25rem",
        "10": "2.5rem",
        "11": "2.75rem",
        "12": "3rem",
        "14": "3.5rem",
        "16": "4rem",
        "18": "4.5rem",
        "20": "5rem",
        "24": "6rem",
        "32": "8rem"
      },
      "zIndex": {
        "modal": 2000,
        "popover": 1000,
        "focus": 10,
        "tooltip": 3000
      },
      "boxShadow": {
        "xsmall": "0 1px 2px 0 rgba(0, 0, 0, 0.12)",
        "small": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.10)",
        "medium": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)",
        "large": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)",
        "xlarge": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)",
        "focus": "0 0 0 3px rgba(0, 52, 125, 1)",
        "focus-inverted": "0 0 0 3px rgba(102, 165, 244, 1)",
        "popover": "0 2px 4px 0 rgba(229, 229, 229, 1)",
        "card": "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)"
      },
      "fontWeight": {
        "bold": "600",
        "regular": "400"
      },
      "fontSize": {
        "heading-2xlarge": "2.5rem",
        "heading-xlarge": "2rem",
        "heading-large": "1.75rem",
        "heading-medium": "1.5rem",
        "heading-small": "1.25rem",
        "heading-xsmall": "1.125rem",
        "xlarge": "1.25rem",
        "large": "1.125rem",
        "medium": "1rem",
        "small": "0.875rem"
      },
      "lineHeight": {
        "heading-2xlarge": "3.25rem",
        "heading-xlarge": "2.5rem",
        "heading-large": "2.25rem",
        "heading-medium": "2rem",
        "heading-small": "1.75rem",
        "heading-xsmall": "1.5rem",
        "xlarge": "1.75rem",
        "large": "1.5rem",
        "medium": "1.25rem"
      },
      "fontFamily": {
        "font-family": "\"Source Sans Pro\", Arial, sans-serif"
      },
      "borderRadius": {
        "small": "2px",
        "medium": "4px",
        "large": "8px",
        "xlarge": "12px",
        "full": "9999px"
      }
    }
  }
};

Var denne artikkelen til hjelp?