Catppuccin for TailwindCSS
-
Install the plugin
npm install -D @catppuccin/tailwindcss pnpm add -D @catppuccin/tailwindcss yarn add -D @catppuccin/tailwindcss
-
Import the theme in the same file as your
tailwindcssimport@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";
-
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!
Current maintainers
Previous maintainer(s)
Copyright © 2021-present Catppuccin Org
![@renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=64&v=4){kind=small}
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
