@catppuccin/tailwindcss

Dependencies

135

Maintainers

Versions

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@catppuccin/tailwindcss

<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transp

0.1.6

latest

Source

npm

Version published: 12 months ago

Maintainers: 6

Install size: 25.8 kB

Created: 2 years ago

Changelog

Source

0.1.6 (2023-06-23)

Bug Fixes

don't require plugin options to be set (e5f774b)

Readme

Source

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

Keywords

FAQs

What is @catppuccin/tailwindcss?

Is @catppuccin/tailwindcss well maintained?

Last updated on 23 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install