Skip to content

catppuccin/tailwindcss

Repository files navigation

Logo
Catppuccin for TailwindCSS

Preview

You can check out one of our deployed examples here!

Usage

  1. Install the plugin
$ npm install -D @catppuccin/tailwindcss
# --- or ---
$ yarn add -D @catppuccin/tailwindcss
  1. Configure your tailwind.config.js
module.exports = {
  // ...other settings
  plugins: [require("@catppuccin/tailwindcss")],
};
  1. 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",
    }),
  ],
};
  1. 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