https://github.com/georgesboris/elm-theme-tailwindcss

Use elm-theme with tailwindcss.
https://github.com/georgesboris/elm-theme-tailwindcss

Last synced: about 2 months ago
JSON representation

Use elm-theme with tailwindcss.

• Host: GitHub
• URL: https://github.com/georgesboris/elm-theme-tailwindcss
• Owner: georgesboris
• License: mpl-2.0
• Created: 2022-10-11T13:52:09.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-04T01:05:54.000Z (9 months ago)
• Last Synced: 2024-04-05T01:17:54.315Z (9 months ago)
• Language: JavaScript
• Size: 19.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-theme-tailwindcss

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

```html



  My text is using the "solidText" color and my background is using the "solid" color of the primary colorset.



```


## 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/georgesboris/elm-theme/1.0.0/Theme#withExtraValues) to your config as well if you wanna add extra colors to your theme.

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

```js

  

// tailwind.config.js

module.exports = {

  plugins: [

    require("elm-theme-tailwindcss")({extraColors: ["cyan", "magenta", "yellow", "black"]})

  ]

}

```