@catppuccin/daisyui

产品 雏菊

预览

拉铁

费拉佩

马奇托

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}莫查 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

使用量

安装

配置

0. 遵循安装指令 尾风 CSS 财务报告和审定财务报表 黛西·乌伊

1. 创建一个单独的文件, 如 catppuccinTheme.latte.ts 导入 @catppuccin/daisyui

   import { createCatppuccinPlugin } from '@catppuccin/daisyui'
   
   export default createCatppuccinPlugin('latte')
   

   您可以通过编辑器的类型提示查看可用的值 。 检查 实例 其他细节.

2. 导入您 CSS 配置文件中创建的文件

   @import 'tailwindcss';
   @plugin "daisyui" {
     themes: false;
   }
   
   @plugin "./catppuccinTheme.latte.ts";
   @plugin "./catppuccinTheme.frappe.ts";
   @plugin "./catppuccinTheme.macchiato.ts";
   @plugin "./catppuccinTheme.mocha.ts";
   

[TIP] 对于 Daisy UI v4, 您可以导入所需的函数 @catppuccin/daisyui/legacy关于具体用途,参见 上一个指南。 。 。 .

用于CDN

在Daisy UI的CDN用法的启发下,我将每个主题分开,允许您独立地导入一个单一的主题或者结合您需要的主题. 见:

<!-- 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" />

示例

您可以使用以下 HTML 测试主题 :

<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>

您可以在 example 文件夹.

谢谢

• 刘明善

版权: 2021年至今 猫头鹰