Generador de temas Tailwind v4

Diseña temas visuales uniformes usando OKLCH y Tailwind CSS v4

TAILWIND V4 & CSS VARS

Light Theme HSL/Hex Palette

Primary Accent:

Background:

Card Background:

Border Color:

Text Foreground:

Border Radius:

Live Theme Component Preview

Dashboard ComponentActive

Sub-Card Container

Real-time CSS variable propagation with responsive design tokens.

CSS Variables Palette (@layer base)

@layer base {
  :root {
    --background: #f8fafc;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --primary: #10b981;
    --primary-foreground: #ffffff;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --accent: #34d399;
    --border: #e2e8f0;
    --radius: 0.75rem;
  }

  .dark {
    --background: #090d16;
    --foreground: #f8fafc;
    --card: #0f172a;
    --card-foreground: #f8fafc;
    --primary: #10b981;
    --primary-foreground: #ffffff;
    --muted: #1e293b;
    --muted-foreground: #94a3b8;
    --accent: #059669;
    --border: #1e293b;
  }
}

Tailwind CSS v4 @theme Declaration

@theme {
  --color-primary: var(--primary);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
}

tailwind.config.js Extension Config

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: {
          DEFAULT: "var(--primary)",
          foreground: "var(--primary-foreground)",
        },
        card: "var(--card)",
        muted: "var(--muted)",
        border: "var(--border)",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
};

@layer base { :root { --background: #f8fafc; --foreground: #0f172a; --card: #ffffff; --card-foreground: #0f172a; --primary: #10b981; --primary-foreground: #ffffff; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #34d399; --border: #e2e8f0; --radius: 0.75rem; } .dark { --background: #090d16; --foreground: #f8fafc; --card: #0f172a; --card-foreground: #f8fafc; --primary: #10b981; --primary-foreground: #ffffff; --muted: #1e293b; --muted-foreground: #94a3b8; --accent: #059669; --border: #1e293b; } }

@theme { --color-primary: var(--primary); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-muted: var(--muted); --color-border: var(--border); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); }

/** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)", }, card: "var(--card)", muted: "var(--muted)", border: "var(--border)", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, };