@keboola/tailwind-config

Shared Tailwind CSS v3 configuration for the Keboola UI platform — the same semantic color palette, plugins, and tw- class prefix that @keboola/design is built on.

Use this when you want your Tailwind-styled app to inherit the platform's visual primitives — most relevant for audiences B (Keboola-branded external builders) and audience A (internal monorepo work). Audience C (customer- branded) typically supplies its own tokens; this package is optional then.

Install

npm install -D @keboola/tailwind-config tailwindcss@^3
# or
yarn add -D @keboola/tailwind-config tailwindcss@^3

Use

Extend or reuse the config from your own tailwind.config.{js,ts}:

import keboolaConfig from '@keboola/tailwind-config';

/** @type {import('tailwindcss').Config} */
export default {
  ...keboolaConfig,
  content: ['./src/**/*.{ts,tsx,mdx}'],
};

Subpath imports

If you only need the raw token data:

import colors from '@keboola/tailwind-config/colors';
import typography from '@keboola/tailwind-config/typography';

Heads up — colors and typography are shipped as .ts source. Resolution works when the consumer is Tailwind v3.3+ (uses jiti under the hood for config loading) or any bundler that's TypeScript-aware (Vite, esbuild, swc, tsx, ts-node via --loader). Plain Node ESM cannot load these files without a TS loader. A pre-compiled .js variant is planned — track or open an issue if your toolchain hits this.

Layout

• index.js — the config entry; consumed via import (ESM).
• colors.ts — semantic palette (primary, background, foreground, muted, border, destructive, etc.) wired to the CSS variables shipped by @keboola/design.
• typography.ts — typography scale (used by the @tailwindcss/typography plugin).

Tailwind v4

Tailwind v4 migration is tracked in UT-3997. For now this package ships a v3-shaped config; the v4 migration moves tokens to CSS @theme.

License

MIT