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