@catppuccin/tailwindcss

产品 尾风CSS

使用量

1. 安装插件

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

2. 导入与您相同的文件中的主题 tailwindcss 导入

   @import "tailwindcss";
   
   /* 
    Choose between `mocha`, `frappe` or `macchiato` for dark mode, latte is included as the light mode flavour.
    We recommend using `mocha` for dark mode.
   */
   @import "@catppuccin/tailwindcss/mocha.css";
   

3. 用在你的标记!

   <!-- All colours are prefixed with `ctp` -->
   <body class="bg-ctp-base">
     <h1 class="text-ctp-text">Welcome!</h1>
   
     <!-- Gradients are supported too -->
     <button
       className="bg-linear-50 from-ctp-red-400 to-ctp-mauve-400 text-ctp-base hover:from-ctp-red hover:to-ctp-mauve"
     >
       Click Here
     </button>
   
     <!-- 
      Flavour variants are predefined (`latte`, `frappe`, `macchiato`, and `mocha`)
      which allows you to force specific flavours and support custom theme switchers.
     -->
     <div className="latte">
       <p className="bg-ctp-base text-ctp-text">Hello from Latte!</p>
     </div>
   </body>
   

请检查date=中的日期值 (帮助) (原始内容存档于2017-10-21). fiedwindcs.catppuccin.com来啊!

谢谢

当前维护者

• 柠檬

先前维护者

• 温通

版权: 2021年至今 猫头鹰