@kape-theme/tailwindcss

Kape color theme integration for Tailwind CSS.

npm install @kape-theme/tailwindcss

Tailwind v3

Add the plugin to your tailwind.config.js:

import kape from "@kape-theme/tailwindcss";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}"],
  plugins: [kape()],
};

That's it. All Kape colors are now available as Tailwind utilities:

<!-- Backgrounds -->
<div class="bg-kape-bg">
<div class="bg-kape-surface">
<div class="bg-kape-error-bg">

<!-- Text -->
<p class="text-kape-fg">Primary text</p>
<p class="text-kape-fg-2">Secondary text</p>
<p class="text-kape-fg-3">Muted text</p>

<!-- Accents -->
<span class="text-kape-yellow">Warning</span>
<span class="text-kape-red">Error</span>
<span class="text-kape-green">Success</span>
<span class="text-kape-blue">Info</span>

<!-- Borders & rings -->
<input class="border border-kape-blue focus:ring-2 focus:ring-kape-yellow">

CSS custom properties

The plugin also injects every color as a CSS custom property on :root:

:root {
  --kape-bg: #181616;
  --kape-yellow: #e7bb5c;
  --kape-blue: #7b8fd4;
  /* ... all colors */
}

Use them anywhere in your CSS:

.my-component {
  background: var(--kape-surface);
  color: var(--kape-fg);
  border-color: var(--kape-blue);
}

Options

kape({
  prefix: "kape",       // default — change to avoid conflicts
  cssVariables: true,   // default — set false to skip :root injection
})

Custom prefix example:

kape({ prefix: "k" })
// → bg-k-bg, text-k-yellow, border-k-blue

Tailwind v4

Import the CSS file in your main stylesheet:

@import "tailwindcss";
@import "@kape-theme/tailwindcss/kape.css";

This registers all Kape colors via @theme as --color-kape-* variables, making them available as standard Tailwind utilities with no JS config needed:

<div class="bg-kape-bg text-kape-fg">
<span class="text-kape-yellow">
<div class="border-kape-blue">

Colors Reference

All utilities use the kape-* namespace:

Base

| Class suffix | Hex | Role | |---|---|---| | bg | #181616 | Main background | | surface | #1e1b1b | Raised surfaces, sidebars | | fg | #d4be98 | Primary text | | fg-2 | #bdae8b | Secondary text | | fg-3 | #928374 | Muted text, hints |

Accents

| Class suffix | Hex | Role | |---|---|---| | red | #b53535 | Errors, deletions | | green | #b4c76e | Success, strings | | yellow | #e7bb5c | Warnings, constants | | blue | #7b8fd4 | Keywords, links | | purple | #b06880 | Functions | | aqua | #689d8a | Types, tags | | white | #c2c2c2 | Punctuation | | orange | #c87941 | Decorators |

Bright variants

| Class suffix | Hex | |---|---| | red-bright | #c94040 | | green-bright | #cad98a | | yellow-bright | #f0cc7a | | blue-bright | #9aaae0 | | purple-bright | #c8889a | | aqua-bright | #89b8a8 | | orange-bright | #d4975a |

UI support

| Class suffix | Hex | Role | |---|---|---| | selection | #2e2a2a | Selected text background | | error-bg | #3c1f1e | Error region background | | warning-bg | #3a2e1a | Warning region background | | success-bg | #2a3120 | Success / hint background | | info-bg | #1e2b30 | Info / link background |

Manual integration (no plugin)

If you prefer to add the colors yourself:

import { kapeColors } from "@kape-theme/tailwindcss/colors";

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        kape: kapeColors,
      },
    },
  },
};

Links

• kape-theme/kape — Main repository
• kape-theme/palette — @kape-theme/palette npm package
• kape-theme — GitHub organization

License

MIT © gabiuz