daisyUI
Note: this package is supposed to be used with unocss-preset-daisy.
- Nested rules are unwrapped
-
@applydirectives 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/daisyuiUsage
The easiest way to use this package is to import all the styles:
import '@kidonng/daisyui/index.css'To only import what you need, always import base first:
import '@kidonng/daisyui/base/index.css'
/* Other imports */Read on to see how to import components, utilities and themes.
Components
/* Import all components */
import '@kidonng/daisyui/components/index.css'
/* Import all unstyled & styled components (same as above) */
import '@kidonng/daisyui/components/unstyled/index.css'
import '@kidonng/daisyui/components/styled/index.css'
/* Import components one by one */
import '@kidonng/daisyui/components/unstyled/button.css'
/* `styled` components should be imported after `unstyled` components */
import '@kidonng/daisyui/components/styled/button.css'Utilities
Utility styles should be imported after component styles.
/* Import all utilities */
import '@kidonng/daisyui/utilities/index.css'
/* Import global, unstyled & styled utilties (same as above) */
import '@kidonng/daisyui/utilities/global/index.css'
import '@kidonng/daisyui/utilities/unstyled/index.css'
import '@kidonng/daisyui/utilities/styled/index.css'
/* Import utility one by one */
import '@kidonng/daisyui/utilities/unstyled/button.css'
/* `styled` utilities should be imported after `unstyled` utilities */
import '@kidonng/daisyui/utilities/styled/button.css'Themes
Note: refer to
unocss-preset-daisydocumentation for custom themes.
/* Import all themes */
import '@kidonng/daisyui/themes/index.css'
/* Import themes one by one */
import '@kidonng/daisyui/themes/cupcake.css'
import '@kidonng/daisyui/themes/lemonade.css'
/* Import auto theme (uses light or dark theme based on `prefers-color-scheme`) */
import '@kidonng/daisyui/themes/auto.css'Refer to daisyUI documentation for the list of themes.
To use a theme other than auto, you need to also specify [data-theme] attribute in HTML:
<body data-theme="cupcake"></body>Single file build
A single file build full.css (and full.min.css) is available if you want to use the runtime version of UnoCSS.