Skip to content

nfaucher8/daisy-ext

Repository files navigation

daisy-ext

daisy-ext is a plugin for Tailwind that extends the palette provided by DaisyUI. It does this by leveraging color-mix to mix the colors provided by DaisyUI themes dynamically in the browser.

Features

  • Tailwind's tree shaking means only the colors used are included in the final app
  • Allows for colors to be lightened/darkened without relying on transparency
  • Provides the ability to use shades with DaisyUI palette colors: bg-primary-500 Primary Example
  • Provides the ability to mix DaisyUI palette colors against each other: bg-primary-300-accent Primary Example

Installation

  1. Add daisy-ext to your projects package.json
  "devDependencies": {
    "daisy-ext": "^1.0.0"
  }
  1. Include daisy-ext as a plugin in your tailwind.config.js.
    Make sure you include daisy-ext before daisyui!
export default {
  //...
  plugins: [
    require('daisy-ext'),
    require('daisyui')
  ],
}

Project Setup

npm install

Build library

npm run build

Lint with ESLint

npm run lint

Format with Prettier

npm run format