unocss-preset-catppuccin

Catppuccin for UnoCSS

Usage

1. Install the package:

pnpm i -D unocss-preset-catppuccin
# -- or --
yarn add -D unocss-preset-catppuccin
# -- or --
npm i -D unocss-preset-catppuccin

2. Add the preset to the UnoCSS config:

// 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>.

<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

• PraZ

 

Copyright © 2021-present Catppuccin Org