@vismaux/tailwindcss-vud

@vismaux/tailwindcss-vud

Visma Unified Design (VUD) theme configuration for tailwindcss.

Usage

Note: This guide expects to have tailwindcss already in place.
If not, please refer to tailwindcss installation guide.

This package supports two different configurations:

• Complementary - for use together with @vismaux/vud;
• Vanilla - standalone configuration of the VUD theme (not available yet).

Complementary (to @vismaux/vud)

• Install this package npm i @vismaux/tailwindcss-vud -D;
• Add it to your tailwind.config.js:

const { complementaryTheme } = require('@vismaux/tailwindcss-vud');

module.exports = {
  /**
   * Main property to set the theme.
   * If needed, values can be overwritten by using the spread syntax:
   * `theme: { ...complementaryTheme, colors: myColors }`
   * or taking use of special `extend` property, more on that:
   * https://tailwindcss.com/docs/theme#extending-the-default-theme
   */
  theme: complementaryTheme,

  // recommended, to avoid name conflicts with the classes coming from `vud` library
  prefix: 'tw-',

  // recommended, to give higher specificity for tailwind utilities than `vud` styles
  important: true,

  // recommended, because `vud` library already handles the font family
  corePlugins: {
    fontFamily: false,
  },

  // ... the rest of your configuration ...
};

Vanilla

not available yet