repository·main·Indexed 19 days ago
https://github.com/catppuccin/tailwindcssA TailwindCSS plugin that integrates the Catppuccin color palette into utility classes using the `ctp` prefix. Supports flavors including mocha, frappe, macchiato, and latte, with support for colors, gradients, and flavor-specific variants.
Install the Catppuccin plugin for TailwindCSS as a development dependency using your preferred package manager.
npm install -D @catppuccin/tailwindcss
pnpm add -D @catppuccin/tailwindcss
yarn add -D @catppuccin/tailwindcssTo use the theme, import the desired Catppuccin flavour CSS file in the same file where you import tailwindcss.
Available dark mode flavours include mocha, frappe, or macchiato. The latte flavour is included as the light mode option. It is recommended to use mocha for dark mode.
@import "tailwindcss";
/* Choose between `mocha`, `frappe` or `macchiato` for dark mode */
@import "@catppuccin/tailwindcss/mocha.css";Catppuccin colors are available in TailwindCSS using the ctp prefix.
Apply colors using classes like bg-ctp-base, text-ctp-text, or color scales like from-ctp-red-400.
Gradients are supported using the standard Tailwind gradient syntax combined with the ctp prefix (e.g., bg-linear-50 from-ctp-red-400 to-ctp-mauve-400).
You can force specific flavours by wrapping elements in a class named after the flavour (latte, frappe, macchiato, or mocha). This is useful for custom theme switchers.
<!-- 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 allow forcing specific flavours -->
<div className="latte">
<p class="bg-ctp-base text-ctp-text">Hello from Latte!</p>
</div>
</body>