liumingxun / daisyui

🌼 Soothing pastel theme for daisyui

Catppuccin for daisyUI

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

Installation

npm	pnpm	yarn
npm install -D @catppuccin/daisyui	pnpm install -D @catppuccin/daisyui	yarn install -D @catppuccin/daisyui

Configuration

// tailwind.config.js
import catppuccin from "@catppuccin/daisyui";

module.exports = {
  content: ["./src/**/*.{js,ts}", "index.html"],
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      "light",
      catppuccin("latte"),
      catppuccin("frappe"),
      catppuccin("macchiato"),
      catppuccin("mocha"),
    ],
  },
};

Using

<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-8">
  <button class="btn">Default</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-error">Error</button>
</div>

You can find the example in the example floder.

💝 Thanks to

• Liumingxun

Copyright © 2021-present Catppuccin Org