Catppuccin for TailwindCSS
Preview
You can check out one of our deployed examples here!
Usage
- Install the plugin
$ npm install -D @catppuccin/tailwindcss
# --- or ---
$ yarn add -D @catppuccin/tailwindcss- Configure your
tailwind.config.js
module.exports = {
// ...other settings
plugins: [require("@catppuccin/tailwindcss")],
};- Optional: customize the plugin
module.exports = {
// ...other settings
plugins: [
require("@catppuccin/tailwindcss")({
// prefix to use, e.g. `text-pink` becomes `text-ctp-pink`.
// default is `false`, which means no prefix
prefix: "ctp",
// which flavour of colours to use by default, in the `:root`
defaultFlavour: "latte",
}),
],
};- Use it in your markup!
<!-- switching the class for parent elements changes the flavour! -->
<body class="frappe">
<h1 class="bg-base text-pink">Hello world!</h1>
</body>You can find examples for Next.js, Svelte, and Vite in the examples folder.
đ Thanks to
Â
Copyright Š 2021-present Catppuccin Org
