@renge-ui/tailwind

Tailwind, proportionally.

Renge tokens as Tailwind utilities. One plugin line bakes spacing, color, typography, motion, radius, layout, and semantic petals into your stylesheet. Profile-reactive. Variant-complete. Proportionally correct.

pnpm add @renge-ui/tailwind @renge-ui/tokens

Installation

Two minutes to proportional UI.

Add the plugin to globals.css, set data-profile on <html>, and every Renge token becomes a utility class. All variants work: hover:, md:, dark:, focus:, group-hover:, etc.

1. Install

pnpm add @renge-ui/tailwind @renge-ui/tokens

2. Register the plugin

/* globals.css */
@import "tailwindcss";
@plugin "@renge-ui/tailwind/plugin";

3. Set the profile

<!-- app.html or layout file -->
<html lang="en" data-profile="ocean" data-mode="light">
  <head>...</head>
  <body>...</body>
</html>

<!-- Optional: Switch profiles at runtime (no rebuild) -->
<script>
  document.documentElement.dataset.profile = "twilight";
  document.documentElement.dataset.mode = "dark";
</script>

Available profiles

Each profile is a complete color system with light and dark variants.

ocean

Cool periwinkle

earth

Warm parchment

twilight

Dusk transition

fire

Warm embers

void

Deep space

leaf

Natural green

Note: Tailwind v4 plugin is recommended. For v3, use @renge-ui/tailwind directly as a preset in tailwind.config.js.

Color System

Six worlds with semantic tokens.

Each profile includes 22 semantic color tokens for backgrounds, text, borders, states, and accents. All WCAG 2.1 AA certified.

Semantic color tokens

Use semantic colors instead of hardcoding hex values. They automatically adapt to the active profile and dark mode.

/* Don't use hardcoded colors */
.button {
  background: #5B7FB7;  /* ❌ breaks when profile changes */
}

/* Use semantic tokens instead */
.button {
  background: var(--renge-color-accent);        /* ✅ profile-reactive */
}

/* Tailwind equivalents */
<button class="bg-renge-accent hover:bg-renge-accent-hover text-renge-fg-inverse">
  Action
</button>

Color palette demo:

accent

bg-accent

success

bg-success

warning

bg-warning

danger

bg-danger

info

bg-info

neutral

bg-neutral

22 semantic color tokens

Class	Value / Derivation	CSS output
bg-renge-bg	Document background	Adapts to profile + mode
bg-renge-bg-subtle	Subtle background layer	Slightly elevated
bg-renge-bg-muted	Muted background	Further elevated
bg-renge-bg-inverse	Inverse of primary bg	For code blocks
text-renge-fg	Primary text color	High contrast
text-renge-fg-subtle	Secondary text	Lower contrast
text-renge-fg-muted	Tertiary text	Minimal contrast
text-renge-fg-inverse	Inverse text	For dark backgrounds
border-renge-border	Default border color	Standard dividers
border-renge-border-subtle	Subtle border	Minimal emphasis
border-renge-border-focus	Focus ring color	Keyboard navigation
bg-renge-accent	Primary accent	CTA, highlights
bg-renge-accent-hover	Hover state accent	Interactive feedback
bg-renge-accent-subtle	Subtle accent background	Soft highlight
text-renge-success	Success status color	WCAG AA compliant
text-renge-warning	Warning status color	WCAG AA compliant
text-renge-danger	Error/danger color	WCAG AA compliant
text-renge-info	Informational color	WCAG AA compliant

Real-world profile usage

<!-- Example: Ocean profile (cool, professional) -->
<html data-profile="ocean">
  <!-- Periwinkle accent, cool neutrals -->
</html>

<!-- Example: Earth profile (warm, natural) -->
<html data-profile="earth">
  <!-- Warm tan accent, earthy neutrals -->
</html>

<!-- Example: Dark mode with Twilight -->
<html data-profile="twilight" data-mode="dark">
  <!-- All colors invert automatically -->
</html>

<!-- Switch profiles dynamically -->
<script>
  function setTheme(profile, mode) {
    document.documentElement.dataset.profile = profile;  // 'ocean', 'earth', 'twilight', etc.
    document.documentElement.dataset.mode = mode;        // 'light' or 'dark'
  }

  setTheme('fire', 'dark');  // Warm embers in dark mode
</script>

Use cases

What you can build.

Real-world patterns: cards, forms, navigation, dashboards, modal layouts, and more.

Product card

<div class="petal-card-surfaceComfortable flex-renge-col gap-renge-3">
  <img src="/product.jpg" class="aspect-renge-golden rounded-renge-2 w-full" />
  <div class="flex-renge-col gap-renge-2">
    <h3 class="text-renge-lg leading-renge-lg text-renge-fg">
      Product name
    </h3>
    <p class="text-renge-sm leading-renge-sm text-renge-fg-muted">
      Description and details.
    </p>
    <div class="flex-renge-row justify-between">
      <span class="text-renge-xl text-renge-accent">$99</span>
      <button class="petal-interactive-buttonMedium bg-renge-accent text-renge-bg">
        Add to cart
      </button>
    </div>
  </div>
</div>

Contact form

<form class="flex-renge-col gap-renge-5">
  <div class="flex-renge-col gap-renge-2">
    <label class="text-renge-sm text-renge-fg font-semibold">
      Email
    </label>
    <input
      type="email"
      class="petal-composition-textField"
      placeholder="hello@example.com"
    />
  </div>

  <div class="flex-renge-col gap-renge-2">
    <label class="text-renge-sm text-renge-fg font-semibold">
      Message
    </label>
    <textarea
      class="petal-composition-textField min-h-32"
      placeholder="Your message..."
    />
  </div>

  <button
    type="submit"
    class="petal-interactive-buttonMedium bg-renge-accent text-renge-bg hover:bg-renge-accent-hover"
  >
    Send
  </button>
</form>

Navigation bar

<nav class="flex-renge-row justify-between px-renge-5 py-renge-4 border-b border-renge-border-subtle">
  <a href="/" class="text-renge-lg leading-renge-lg font-semibold text-renge-accent">
    Logo
  </a>

  <div class="stack-h gap-renge-6">
    <a href="/docs" class="text-renge-base text-renge-fg-muted hover:text-renge-fg">
      Docs
    </a>
    <a href="/api" class="text-renge-base text-renge-fg-muted hover:text-renge-fg">
      API
    </a>
    <button class="petal-interactive-buttonMedium bg-renge-accent text-renge-bg">
      Sign in
    </button>
  </div>
</nav>

Responsive grid

<div class="grid grid-cols-renge-1 md:grid-cols-renge-2 lg:grid-cols-renge-3 gap-renge-5">
  {items.map(item => (
    <div key={item.id} class="petal-card-surfaceComfortable">
      {item.content}
    </div>
  ))}
</div>

<!-- Or responsive auto-fit -->
<div class="grid grid-cols-auto-fit-renge-md gap-renge-4">
  {items.map(item => (
    <div key={item.id} class="petal-card-surfaceMinimal">
      {item.content}
    </div>
  ))}
</div>

Semantic petals

Pre-composed token patterns.

Petals are semantic combinations of tokens — typography, spacing, cards, and interactive patterns. Apply them as single utilities for consistent, maintainable components.

What are petals?

Petals bridge individual tokens and full components. Instead of composing fontSize + lineHeight for every heading, use petal-typography-displayLarge. One class applies proven combinations.

100 petals across 13 categories

<!-- Typography: 8 levels from display to label -->
<h1 class="petal-typography-displayLarge">Hero headline</h1>
<h2 class="petal-typography-headingLarge">Section title</h2>
<h3 class="petal-typography-headingMedium">Subsection</h3>
<h4 class="petal-typography-headingSmall">Sub-subsection</h4>
<p class="petal-typography-bodyLarge">Large paragraph</p>
<p class="petal-typography-bodyRegular">Standard paragraph</p>
<p class="petal-typography-bodySmall">Small body text</p>
<span class="petal-typography-labelXs">UI label, <code>, <small></span>

<!-- Spacing: 4 comfort levels for padding/gap -->
<div class="petal-spacing-generous">Generous padding + gap</div>
<div class="petal-spacing-comfortable">Natural rhythm (default)</div>
<div class="petal-spacing-compact">Tight but breathable</div>
<div class="petal-spacing-condensed">Minimal spacing</div>

<!-- Cards: 4 surface levels with shadow and radius -->
<div class="petal-card-surfaceGenerous">Full featured</div>
<div class="petal-card-surfaceComfortable">Standard (most used)</div>
<div class="petal-card-surfaceCompact">Tight</div>
<div class="petal-card-surfaceMinimal">Subtle</div>

<!-- Interactive: Buttons and focus states -->
<button class="petal-interactive-buttonLarge">Primary action</button>
<button class="petal-interactive-buttonMedium">Standard</button>
<button class="petal-interactive-buttonSmall">Compact</button>
<div class="petal-interactive-focus">Focus ring (copy to any elem)</div>

<!-- Compositions: Pre-styled form elements -->
<input class="petal-composition-textField" placeholder="Text input" />
<span class="petal-composition-badge">Label</span>
<span class="petal-composition-chip">Dismissible ×</span>

Petals in action:

petal-typography-displayLarge

Large Display Heading

petal-interactive-buttonLarge

petal-cards-surfaceGenerous

Card with generous padding

Semantic composition for consistent spacing

Petal reference table

Class	Value / Derivation	CSS output
petal-typography-displayLarge	font-size: 110px, line-height: 1.2, tracking: -0.02em	Hero/title
petal-typography-headingLarge	font-size: 68px, line-height: 1.2	H2 / section title
petal-typography-headingMedium	font-size: 42px, line-height: 1.4	H3 / subsection
petal-typography-headingSmall	font-size: 26px, line-height: 1.4	H4 / emphasis
petal-typography-bodyLarge	font-size: 18px, line-height: 1.6	Lead paragraph
petal-typography-bodyRegular	font-size: 16px, line-height: 1.6	Body text (default)
petal-typography-bodySmall	font-size: 14px, line-height: 1.6	Small body
petal-typography-labelXs	font-size: 12px, line-height: 1.4, uppercase	Labels, small UI
petal-spacing-generous	p: space-5 (32px), gap: space-4 (20px)	Spacious UIs
petal-spacing-comfortable	p: space-4 (20px), gap: space-3 (12px)	Standard rhythm
petal-spacing-compact	p: space-3 (12px), gap: space-2 (8px)	Dense UIs
petal-spacing-condensed	p: space-2 (8px), gap: space-1 (4px)	Very tight
petal-card-surfaceGenerous	p: space-5, shadow-5, radius-3	Featured cards
petal-card-surfaceComfortable	p: space-4, shadow-3, radius-3	Standard cards
petal-card-surfaceCompact	p: space-3, shadow-2, radius-2	Compact cards
petal-card-surfaceMinimal	p: space-2, shadow-1, radius-2	Subtle surfaces
petal-interactive-buttonLarge	p: space-3 space-5, radius-2, transition	Large CTAs
petal-interactive-buttonMedium	p: space-2 space-4, radius-2, transition	Standard buttons
petal-interactive-buttonSmall	p: space-1 space-3, radius-2, transition	Icon/compact
petal-interactive-focus	ring-2, ring-color-border-focus, radius-1	Keyboard focus
petal-composition-textField	p: space-2 space-3, border, radius-2	Text inputs
petal-composition-badge	p: space-1 space-2, radius-full, font-size-xs	Labels
petal-composition-chip	p: space-1 space-2, radius-full, bg-accent-subtle	Tags/chips

Building buttons with petals

<!-- Primary button: petal + accent color -->
<button class="petal-interactive-buttonMedium bg-renge-accent text-renge-bg hover:bg-renge-accent-hover focus:ring-2 ring-renge-border-focus">
  Save changes
</button>

<!-- Secondary button: petal + subtle colors -->
<button class="petal-interactive-buttonMedium bg-renge-bg-subtle text-renge-fg hover:bg-renge-bg-muted border border-renge-border">
  Cancel
</button>

<!-- Danger button: petal + danger color -->
<button class="petal-interactive-buttonMedium bg-renge-danger text-renge-bg hover:opacity-90">
  Delete
</button>

<!-- Small compact button -->
<button class="petal-interactive-buttonSmall bg-renge-accent text-renge-bg">
  Add
</button>

<!-- Large, full-width button -->
<button class="petal-interactive-buttonLarge w-full bg-renge-accent text-renge-bg">
  Continue
</button>

Full petal reference: visit /petals to explore all 100 petals with visual previews.

Best practices

Build smarter with proportions.

Patterns and principles for scalable, maintainable Tailwind + Renge interfaces.

Start with petals, extend with utilities

Petals encode semantic intent. Use petal-typography-bodyRegular for body text, then add text-renge-fg-muted or text-renge-accent for variants. Never guess spacing or type sizes.

Use gap-renge-* for consistent rhythm

Spacing within components should follow the Fibonacci scale. gap-renge-4 inside a card is more consistent than arbitrary pixels. The scale compounds across your interface.

Compose cards from petals

<!-- ❌ Don't hardcode spacing and radius -->
<div class="p-4 rounded-lg shadow-md">...</div>

<!-- ✅ Do use card petals -->
<div class="petal-card-surfaceComfortable">...</div>

<!-- ✅ Mix petals for custom combinations -->
<div class="petal-spacing-comfortable bg-renge-bg-subtle border border-renge-border rounded-renge-3">
  ...
</div>

Profile-aware colors

Never hardcode colors. Use semantic tokens: text-renge-fg, text-renge-fg-muted, bg-renge-accent. They adapt to every color profile and dark mode.

Responsive with golden breakpoints

<!-- md: = 768px, lg: = 1024px, etc. (Fibonacci × base scale) -->
<div class="grid grid-cols-renge-1 md:grid-cols-renge-2 lg:grid-cols-renge-3 gap-renge-5">
  ...
</div>

<!-- Stack to flex-row on larger screens -->
<div class="stack md:stack-h gap-renge-4">
  ...
</div>

Motion and transitions

<!-- Renge durations are Fibonacci × 100ms: 100ms, 100ms, 200ms, 300ms, 500ms... -->
<button class="transition-colors duration-renge-2 ease-renge-ease-out hover:bg-renge-accent">
  Smooth interaction
</button>

<!-- Motion scale: duration-renge-1 through duration-renge-10 -->
<div class="transition-all duration-renge-4 ease-renge-spring">
  Springy animation
</div>

Utility reference

Complete class reference.

All available utility classes organized by category. Mix and match for infinite combinations.

Spacing (Fibonacci × 4px, steps 0–10)

<!-- Padding: p-, px-, py-, pt-, pr-, pb-, pl- -->
p-renge-0 through p-renge-10
px-renge-*, py-renge-*, pt-renge-*, etc.

<!-- Margin -->
m-renge-*, mx-renge-*, my-renge-*, mt-renge-*, etc.

<!-- Gap (flex/grid) -->
gap-renge-*, gap-x-renge-*, gap-y-renge-*

<!-- Width & Height -->
w-renge-*, h-renge-*, min-w-renge-*, max-w-renge-*, min-h-renge-*

<!-- Values: 0px, 4px, 8px, 12px, 20px, 32px, 52px, 84px, 136px, 220px -->
<div class="p-renge-4 m-renge-3 gap-renge-5">...</div>

Spacing scale demo:

gap-renge-1

gap-renge-2

gap-renge-3

gap-renge-4

gap-renge-5

gap-renge-6

gap-renge-7

gap-renge-8

Colors (22 semantic tokens)

<!-- Backgrounds -->
bg-renge-bg, bg-renge-bg-subtle, bg-renge-bg-muted, bg-renge-bg-inverse

<!-- Text (foreground) -->
text-renge-fg, text-renge-fg-subtle, text-renge-fg-muted, text-renge-fg-inverse

<!-- Borders -->
border-renge-border, border-renge-border-subtle, border-renge-border-focus

<!-- Accent (primary) -->
bg-renge-accent, bg-renge-accent-hover, bg-renge-accent-subtle

<!-- Status -->
text-renge-success, text-renge-warning, text-renge-danger, text-renge-info

<!-- Focus ring -->
ring-renge-border-focus

<div class="bg-renge-bg text-renge-fg border border-renge-border">
  <button class="bg-renge-accent text-renge-bg hover:bg-renge-accent-hover">
    CTA
  </button>
</div>