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` --><bodyclass="bg-ctp-base"><h1class="text-ctp-text">Welcome!</h1><!-- Gradients are supported too --><buttonclassName="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. --><divclassName="latte"><pclassName="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