Tailwind Target

Compile KERN to React components styled with Tailwind CSS utility classes. Style shorthand properties map to Tailwind class vocabulary automatically.

What it generates

KERN input:

page name=Landing route=/
  col {gap:24,p:40,bg:#09090b,c:#fff,minH:100vh}
    text value="Ship faster" tag=h1 {fs:48,fw:800}
    text value="Write once, compile everywhere." tag=p {fs:18,c:#a1a1aa}
    button text="Get Started" {bg:#f97316,c:#fff,br:8,px:24,py:12}

Compiled output:

export default function LandingPage() {
  return (
    <div className="flex flex-col gap-6 p-10 bg-zinc-950 text-white min-h-screen">
      <h1 className="text-5xl font-extrabold">Ship faster</h1>
      <p className="text-lg text-zinc-400">
        Write once, compile everywhere.
      </p>
      <button className="bg-orange-500 text-white rounded-lg px-6 py-3">
        Get Started
      </button>
    </div>
  );
}

Target-specific nodes

The Tailwind target uses the same node types as the React target. The difference is in code generation: instead of inline style objects, KERN style shorthand properties are mapped to Tailwind utility classes.

• bg:#09090b maps to bg-zinc-950
• fs:48 maps to text-5xl
• fw:800 maps to font-extrabold
• br:8 maps to rounded-lg
• gap:24 maps to gap-6

Configuration

Tailwind-specific options in kern.config.ts:

• frameworkVersions.tailwind — Target Tailwind version: 3.x or 4.x (default: 4.x)
• colors — Custom color mappings for hex-to-Tailwind class resolution

import { defineConfig } from '@kernlang/cli';

export default defineConfig({
  target: 'tailwind',
  outdir: 'src/components/',
  frameworkVersions: { tailwind: '4.x' },
  colors: {
    brand: '#f97316',
    surface: '#18181b',
  },
});

Quick start

kern dev app.kern --target=tailwind