catppuccin/tailwindcss

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 59 Commits
.github		.github
assets		assets
demo		demo
packages/catppuccin-tailwindcss		packages/catppuccin-tailwindcss
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
renovate.json		renovate.json

Repository files navigation

Logo
Catppuccin for TailwindCSS

Usage

Install the plugin

npm install -D @catppuccin/tailwindcss
pnpm add -D @catppuccin/tailwindcss
yarn add -D @catppuccin/tailwindcss

Import the theme in the same file as your tailwindcss import

@import "tailwindcss";
/* 
 Choose between `mocha`, `frappe` or `macchiato` for dark mode, latte is included as the light mode flavour.
 We recommend using `mocha` for dark mode.
*/
@import "@catppuccin/tailwindcss/mocha.css";

Use it in your markup!

<!-- All colours are prefixed with `ctp` -->
<body class="bg-ctp-base">
 <h1 class="text-ctp-text">Welcome!</h1>
 <!-- Gradients are supported too -->
 <button
 className="bg-linear-50 from-ctp-red-400 to-ctp-mauve-400 text-ctp-base hover:from-ctp-red hover:to-ctp-mauve"
 >
 Click Here
 </button>
 <!-- 
 Flavour variants are predefined (`latte`, `frappe`, `macchiato`, and `mocha`)
 which allows you to force specific flavours and support custom theme switchers.
 -->
 <div className="latte">
 <p className="bg-ctp-base text-ctp-text">Hello from Latte!</p>
 </div>
</body>