Daisy UI Cheatsheet

Daisy is built for your easy going Developers. Developers like you and me. We dont care too much about the inner workings, we more care about building something awesome, quickly. Daisy is good like that. Many pre-built components ready to go. It aims to clear up the mess of bootstrap and tailwindcss classes by providing more semantic names. Daisy also offers themes which is truely the lazy approach to building something awesome, quicky. Its wonderful, your gonna love it.

Install Tailwind

npm install -D tailwindcss
npx tailwindcss init

In Your tailwind.config.js configure Tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

add tailwind to your existing css

@tailwind base;
@tailwind components;
@tailwind utilities;

add daisy to your css

@import "daisyui";

Daisy Config

module.exports = {
  //...

  // add daisyUI plugin
  plugins: [require("daisyui")],

  // daisyUI config (optional - here are the default values)
  daisyui: {
    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
  },

  //...
}

Start Build

Start compiling css

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Troubleshooting

This funny looking error usually relates to a syntax error in your tailwind.config.js

SyntaxError: Unexpected token (20:16)
    at unexpected (/Users/pixelstorm/wp_playground/wp/wp-content/themes/wp/node_modules/sucrase/dist/parser/traverser/util.js:99:15)