Implementation:Helicone Helicone Tailwind Config

Knowledge Sources	Helicone
Domains	DesignSystem, Frontend
Last Updated	2026-02-14 06:32 GMT

Overview

Tailwind CSS configuration file that defines the complete Helicone visual design system including semantic color tokens, custom animations, Tremor chart library integration, and plugin configuration.

Description

tailwind.config.ts is the single source of truth for the Helicone frontend design system. It configures Tailwind CSS with a comprehensive set of customizations organized into several key areas:

Dark Mode: Uses class-based dark mode (darkMode: ["class"]), enabling programmatic theme toggling.

Content Scanning: Scans pages, components, Tremor library modules, assistant-ui playground, app directory, and src directory for class usage.

Custom Animations:

• blink -- Cursor-style blinking animation (1s step-end infinite)
• popin -- Scale-from-zero entrance animation
• accordion-down / accordion-up -- Radix accordion height transitions (0.2s)
• shine -- Background gradient shine sweep (2s linear)
• fade-in -- Opacity fade-in (0.5s ease-out)

Semantic Color System: All core UI colors are defined using CSS custom properties (HSL variables), enabling light/dark mode switching at the CSS variable level:

Token	Purpose
background / foreground	Page background and primary text
card / card-foreground	Card component colors
popover / popover-foreground	Popover/dropdown colors
primary / primary-foreground	Brand/primary action colors
secondary / secondary-foreground	Secondary action colors
muted / muted-foreground	Muted/subdued content
subdued / subdued-foreground	Extra-subdued content
accent / accent-foreground	Accent highlight colors
destructive / destructive-foreground	Error/danger colors
confirmative / confirmative-foreground	Success/confirmation colors
border, input, ring	Border, form input, and focus ring colors

Chart Colors: 10 chart colors (chart-1 through chart-10) using OKLCH color space via CSS custom properties.

Sidebar Colors: Dedicated sidebar color tokens including background, foreground, primary, accent, border, and ring variants.

Tremor Chart Library Compatibility: Full light and dark mode color palettes for the Tremor charting library, including brand, background, border, ring, and content variants with specific hex values.

Additional Brand Colors:

• heliblue (#0DA5E8), heliblue-light (#E6F6FD), heliblue-dark (#0369A1)
• aui.primary (#18a4e9) for assistant-ui integration

Border Radius: Configurable radius using CSS variable --radius with lg, md, sm variants plus Tremor-specific radii.

Safelist: Extensive safelist patterns ensuring dynamic Tailwind classes for all standard color utilities (bg, text, border, ring, stroke, fill) across all color scales and chart colors are preserved in the build.

Plugins:

• tailwind-scrollbar -- Custom scrollbar styling
• tailwindcss-animate -- Animation utilities
• @tailwindcss/typography -- Prose styling
• Custom plugin -- Numbered group hover/active variants (group-one through group-four)

Usage

This configuration is automatically loaded by Tailwind CSS during the build process. Developers use the defined semantic tokens as Tailwind utility classes (e.g., bg-primary, text-muted-foreground, border-border) throughout all frontend components.

Code Reference

Source Location

• Repository: Helicone
• File: web/tailwind.config.ts

Signature

import type { Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

export default {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@assistant-ui/react-playground/dist/**/*.js",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: { /* semantic tokens */ },
      animation: { /* custom animations */ },
      keyframes: { /* animation keyframes */ },
      borderRadius: { /* configurable radii */ },
      boxShadow: { /* tremor shadows */ },
      fontSize: { /* tremor font sizes */ },
    },
  },
  safelist: [ /* dynamic class patterns */ ],
  plugins: [ /* scrollbar, animate, typography, custom variants */ ],
} satisfies Config;

Import

// This file is automatically loaded by the Tailwind CSS build pipeline
// No direct import needed in application code
// Use the defined tokens as Tailwind utility classes:
// className="bg-primary text-primary-foreground"
// className="bg-muted text-muted-foreground"
// className="border-border"

I/O Contract

Semantic Color Tokens

Token	CSS Variable	Light Mode	Dark Mode
bg-primary	--primary	sky-500 (#0EA5E9)	sky-600 (#0284C7)
bg-background	--background	white (#FFFFFF)	slate-950 (#020617)
text-foreground	--foreground	slate-900 (#0F172A)	slate-50 (#F8FAFC)
bg-muted	--muted	slate-100 (#F1F5F9)	slate-800 (#1E293B)
bg-destructive	--destructive	red-600 (#DC2626)	red-900 (#7F1D1D)
bg-confirmative	--confirmative	green-600 (#16A34A)	green-900 (#14532D)
border-border	--border	slate-200 (#E2E8F0)	slate-800 (#1E293B)

Custom Animations

Name	Duration	Easing	Description
blink	1s	step-end infinite	Cursor blinking effect
popin	1s	ease-out forwards	Scale entrance animation
accordion-down	0.2s	ease-out	Accordion expand
accordion-up	0.2s	ease-out	Accordion collapse
shine	2s	linear infinite	Background gradient sweep
fade-in	0.5s	ease-out forwards	Opacity fade in

Usage Examples

// Using semantic color tokens
<div className="bg-background text-foreground">
  <h1 className="text-primary">Welcome to Helicone</h1>
  <p className="text-muted-foreground">Monitor your LLM usage</p>
  <button className="bg-primary text-primary-foreground">Get Started</button>
  <span className="text-destructive">Error occurred</span>
  <span className="text-confirmative">Success!</span>
</div>

// Using chart colors
<div className="bg-chart-1">Chart series 1</div>
<div className="bg-chart-2">Chart series 2</div>

// Using custom animations
<div className="animate-fade-in">Fading in content</div>
<div className="animate-popin">Popping in content</div>

// Using sidebar tokens
<nav className="bg-sidebar-background text-sidebar-foreground border-sidebar-border">
  <a className="bg-sidebar-accent text-sidebar-accent-foreground">Active Item</a>
</nav>

// Using numbered group variants
<div className="group-one">
  <span className="group-one-hover:text-primary">Hover me</span>
</div>

Related Pages

• Principle:Helicone_Helicone_Design_System