daisyUI

A UnoCSS-compatible redistribution of daisyUI

Nested rules are unwrapped
@apply directives are preserved (to be processed by @unocss/transformer-directives)
Theme and hsla() variables are comma separated (instead of space)
--tw-*- variables are renamed to --un-*

Installation

npm installl @kidonng/daisyui

Usage

The easiest way to use this package is to import all the styles:

@import '@kidonng/daisyui/index.css';

If you want to selectively import them, remember to always import base, which is just a few rules anyway:

@import '@kidonng/daisyui/base/index.css';

Components

styled components should be imported after unstyled components.

/* Import all components */
@import '@kidonng/daisyui/components/index.css';

/* Entrypoints */
@import '@kidonng/daisyui/components/unstyled/index.css';
@import '@kidonng/daisyui/components/styled/index.css';

/* à la carte */
@import '@kidonng/daisyui/components/unstyled/button.css';
@import '@kidonng/daisyui/components/styled/button.css';

Utilities

Utility styles should be imported after component styles in order to take effect.

Same as components, styled utilities should be imported after unstyled utilities.

/* Import all utilities */
@import '@kidonng/daisyui/utilities/index.css';

/* Entrypoints */
@import '@kidonng/daisyui/utilities/global/index.css';
@import '@kidonng/daisyui/utilities/unstyled/index.css';
@import '@kidonng/daisyui/utilities/styled/index.css';

/* à la carte */
@import '@kidonng/daisyui/utilities/unstyled/button.css';
@import '@kidonng/daisyui/utilities/styled/button.css';

Themes

Unlike themes.css in official daisyui package, this distribution split each theme into individual files.

/* Import all themes */
@import '@kidonng/daisyui/themes/index.css';

/* à la carte */
@import '@kidonng/daisyui/themes/cupcake.css';
@import '@kidonng/daisyui/themes/lemonade.css';

/* Auto theme (uses light or dark theme based on `prefers-color-scheme`) */
@import '@kidonng/daisyui/themes/auto.css';

To apply a theme other than auto, use [data-theme] attribute:

<body data-theme="cupcake"></body>

Full build

A single file build full.css (and full.min.css) is available if you want to use the runtime version of UnoCSS.