Tailwind v4 Theme Generator

Visually configure Tailwind CSS v4 themes, including custom colors, breakpoints, fonts and more, with automatic @theme CSS code generation.

Custom Colors

Output

@import "tailwindcss";

@theme {
  /* Colors */
  --color-primary: #3B82F6;
  --color-secondary: #6B7280;
  --color-success: #10B981;
  --color-info: #06B6D4;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Screens */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Fonts */
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Merriweather, serif;
  --font-mono: Fira Code, monospace;
}

User Guide

Tailwind CSS v4 uses CSS variables and the {'@'}theme block for configuration. Once configured, click Download and save the content to your main CSS file (e.g. main.css ), or paste it into a {'@'}theme block.