📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@catppuccin/tailwindcss

Package Overview
Dependencies
Maintainers
6
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

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
Weekly downloads
1.1K
26.85%
Maintainers
6
Weekly downloads
 
Created
Source

Logo
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

Keywords

pastel-colors
catppuccin
colors
theme
palette
soothing

FAQs

Package last updated on 23 Jun 2023

Did you know?

Socket

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

Related posts

A New Overview in our Dashboard

Product

A New Overview in our Dashboard

We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.

By André Staltz  -  Apr 29, 2025