
Catppuccin for UnoCSS
Usage
- Install the package:
pnpm i -D unocss-preset-catppuccin # -- or -- yarn add -D unocss-preset-catppuccin # -- or -- npm i -D unocss-preset-catppuccin
- Add the preset to the UnoCSS config: ```ts // unocss.config.ts import { defineConfig, presetUno } from 'unocss' import presetCatppuccin from 'unocss-preset-catppuccin'
export default { plugins: [ UnoCSS({ presets: [ presetUno(), presetCatppuccin(), ], }), ], }
3. (_optional_) Configuration parameters can be passed to the preset:
- `defaultFlavour`: will register colors from passed flavour under `-ctp-color` directly.
- `prefix`: change the default `ctp` prefix to whatever suits you.
4. Use the new colors! They are registered under `-ctp-<flavour>-<color>`.
```html
<div class="bg-ctp-mocha-base">
<span class="text-ctp-mocha-red">
I'm a mocha red text on a base background
</span>
</div>
💝 Thanks to
Copyright © 2021-present Catppuccin Org