@catppuccin/tailwindcss

Catppuccin for TailwindCSS

Usage

1. Install the plugin

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

2. Import the theme in the same file as your tailwindcss import

   @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. Use it in your markup!

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

Check out some more advanced examples at tailwindcss.catppuccin.com!

💝 Thanks to

Current maintainers

• lemon

Previous maintainer(s)

• winston

Copyright © 2021-present Catppuccin Org