# elm-theme-tailwindcss

> Use elm-theme with tailwindcss.

Latest version **2.0.1** (published 2022-11-29) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install elm-theme-tailwindcss
pnpm add elm-theme-tailwindcss
yarn add elm-theme-tailwindcss
bun add elm-theme-tailwindcss
```

## 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 | 2.0.1 |
| Published | 2022-11-29 |
| First published | 2022-10-11 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Georges Boris |
| Maintainers | dtwrks |

## Links

- npm: https://www.npmjs.com/package/elm-theme-tailwindcss
- npm.io page: https://npm.io/package/elm-theme-tailwindcss

## Recent versions

- 2.0.1 (latest) — 2022-11-29
- 2.0.0 — 2022-11-29
- 1.0.2 — 2022-10-15
- 1.0.1 — 2022-10-11
- 1.0.0 — 2022-10-11

## README

# elm-theme-tailwindcss

Use [elm-theme](https://package.elm-lang.org/packages/uncover-co/elm-theme/latest/) with [Tailwind CSS](https://tailwindcss.com/).

## Setup

Install this package as a development dependency.

```
npm i -D elm-theme-tailwindcss
```

Then set it up as a [tailwind plugin](https://tailwindcss.com/docs/plugins).

```js
// tailwind.config.js

module.exports = {
  plugins: [
    require("elm-theme-tailwindcss")
  ]
}
```

## Strict Mode

If you want to make sure your codebase can only use elm-theme values, you can set `strict` option to `true`. This will disable tailwind's default colors and font families. It will also set some base styles so all your html elements are using your theme design tokens.

```js
  
// tailwind.config.js

module.exports = {
  plugins: [
    require("elm-theme-tailwindcss")({strict: true})
  ]
}
```

## Extra Colors

You can pass in your [elm-theme's extra colors](https://package.elm-lang.org/packages/uncover-co/elm-theme/2.0.0/Theme#withExtraValues) to your config as well if you wanna add extra colors to your theme (e.g. data visualization colors that fall out of the scope of the usual primary, secondary, etc, color schema).

Note that this can be used with or without strict mode.

```js
  
// tailwind.config.js

module.exports = {
  plugins: [
    require("elm-theme-tailwindcss")({colors: ["cyan", "magenta", "yellow", "black"]})
  ]
}
```

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