@catppuccin/tailwindcss
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

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

Dependencies (0)

    Dev Dependencies (11)

    Package Sidebar

    Install

    npm i @catppuccin/tailwindcss

    Weekly Downloads

    1,250

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    26.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • hamothy
    • aekstrom
    • andreasgrafen
    • nekowinston
    • pocco81