Catppuccin for daisyUI

Previews

<summary>🌻 Latte</summary>

<summary>🪴 Frappé</summary>

<summary>🌺 Macchiato</summary>

<summary>🌿 Mocha</summary>

Usage

Installation

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

Configuration

Follow the installation instructions for Tailwind CSS and Daisy UI
Create a separate file like catppuccinTheme.latte.ts and import @catppuccin/daisyui
```
import { createCatppuccinPlugin } from '@catppuccin/daisyui'

export default createCatppuccinPlugin('latte')
```
You can view available values through your editor's type hints. Check example for additional details.

Import the created file in your CSS configuration file

@import 'tailwindcss';
@plugin "daisyui" {
  themes: false;
}

@plugin "./catppuccinTheme.latte.ts";
@plugin "./catppuccinTheme.frappe.ts";
@plugin "./catppuccinTheme.macchiato.ts";
@plugin "./catppuccinTheme.mocha.ts";

[!TIP] For Daisy UI v4, you can import required functions from @catppuccin/daisyui/legacy. For specific usage, refer to the previous guide.

For CDN

Inspired by the CDN usage of Daisy UI, I have separated each theme, allowing you to independently import a single theme or combine the themes you need. See:

<!-- some? -->
<link
  href="https://cdn.jsdelivr.net/npm/@catppuccin/daisyui@2/latte.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/frappe.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/macchiato.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/mocha.css"
  rel="stylesheet"
  type="text/css"
/>
<!-- every! -->
<link href="https://cdn.jsdelivr.net/npm/@catppuccin/daisyui@2/themes.css" rel="stylesheet" type="text/css" />

Example

You can use the following HTML to test the theme:

<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-9">
  <button class="btn">Default</button>
  <button class="btn btn-neutral">Neutral</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 folder.

💝 Thanks to

Liumingxun

包详细信息

@catppuccin/daisyui

自述文件