kacaii.dev
馃捇 My personal website
blog.kacaii.dev/
blog
gleam
lustre
1<h3 align="center">
2 <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
3 <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
4 Catppuccin for <a href="https://github.com/tailwindlabs/tailwindcss">TailwindCSS</a>
5 <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
6</h3>
7
8<p align="center">
9 <a href="https://github.com/catppuccin/tailwindcss/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/tailwindcss?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
10 <a href="https://github.com/catppuccin/tailwindcss/issues"><img src="https://img.shields.io/github/issues/catppuccin/tailwindcss?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
11 <a href="https://github.com/catppuccin/tailwindcss/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/tailwindcss?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
12</p>
13
14## Usage
15
161. Install the plugin
17
18 ```sh
19 npm install -D @catppuccin/tailwindcss
20 pnpm add -D @catppuccin/tailwindcss
21 yarn add -D @catppuccin/tailwindcss
22 ```
23
242. Import the theme in the same file as your `tailwindcss` import
25
26 ```css
27 @import "tailwindcss";
28
29 /*
30 Choose between `mocha`, `frappe` or `macchiato` for dark mode, latte is included as the light mode flavour.
31 We recommend using `mocha` for dark mode.
32 */
33 @import "@catppuccin/tailwindcss/mocha.css";
34 ```
35
363. Use it in your markup!
37
38 ```html
39 <!-- All colours are prefixed with `ctp` -->
40 <body class="bg-ctp-base">
41 <h1 class="text-ctp-text">Welcome!</h1>
42
43 <!-- Gradients are supported too -->
44 <button
45 className="bg-linear-50 from-ctp-red-400 to-ctp-mauve-400 text-ctp-base hover:from-ctp-red hover:to-ctp-mauve"
46 >
47 Click Here
48 </button>
49
50 <!--
51 Flavour variants are predefined (`latte`, `frappe`, `macchiato`, and `mocha`)
52 which allows you to force specific flavours and support custom theme switchers.
53 -->
54 <div className="latte">
55 <p className="bg-ctp-base text-ctp-text">Hello from Latte!</p>
56 </div>
57 </body>
58 ```
59
60Check out some more advanced examples at
61[tailwindcss.catppuccin.com](https://tailwindcss.catppuccin.com)!
62
63## 馃挐 Thanks to
64
65**Current maintainers**
66
67- [lemon](https://github.com/unseen-ninja)
68
69**Previous maintainer(s)**
70
71- [winston](https://github.com/nekowinston)
72
73
74
75<p align="center"><img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /></p>
76<p align="center">Copyright © 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
77<p align="center"><a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a></p>