# @visma/tailwindcss-vud

> Visma Unified Design theme configuration for tailwindcss.

Latest version **1.0.0** (published 2022-03-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install @visma/tailwindcss-vud
pnpm add @visma/tailwindcss-vud
yarn add @visma/tailwindcss-vud
bun add @visma/tailwindcss-vud
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-03-14 |
| First published | 2022-03-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 84 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Rokas Brazdzionis |
| Maintainers | visma_bot, arnosaine, juusoko |

## Links

- npm: https://www.npmjs.com/package/@visma/tailwindcss-vud
- Repository: https://github.com/Visma-AS/visma
- Homepage: https://github.com/Visma-AS/visma/tree/main/packages/tailwindcss-vud
- Issues: https://github.com/Visma-AS/visma/issues
- npm.io page: https://npm.io/package/@visma/tailwindcss-vud

## Recent versions

- 1.0.0 (latest) — 2022-03-14

## README

# @visma/tailwindcss-vud

[![npm version](https://badge.fury.io/js/%40visma%2Ftailwindcss-vud.svg)](https://www.npmjs.com/package/@visma/tailwindcss-vud)

[Visma Unified Design (VUD)](https://ux.visma.com/guidelines-resources/) theme configuration for [tailwindcss](https://tailwindcss.com).

## Usage

> Note: This guide expects to have `tailwindcss` already in place.
> If not, please refer to [tailwindcss installation](https://tailwindcss.com/docs/installation) guide.

This package supports two different configurations:

- **Complementary** - adapted for use together with [`@vismaux/vud`](https://www.npmjs.com/package/@vismaux/vud);
- **Vanilla** - standalone configuration of the VUD theme.

### Complementary (to `@vismaux/vud`)

1. Install this package `npm i @visma/tailwindcss-vud -D`;
2. Add it to your `tailwind.config.js`:

```js
const { complementaryTheme } = require('@visma/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

to be implemented...

---
_Source: https://npm.io/package/@visma/tailwindcss-vud · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._