Customizing Tailwind

Custom Colors

UTILITY CLASSES FOR YOUR COLORS

/* globals.css */
@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
}

bg-brand-500

auto-generated from theme declaration — no config file needed!

Custom Utilities

BUILD YOUR OWN UTILITIES

/* globals.css */
@import "tailwindcss";

@utility glass {
  backdrop-filter: blur(12px);
  background: oklch(100% 0 0 / 0.1);
  border: 1px solid oklch(100% 0 0 / 0.2);
}

Frosted Glass

backdrop-filter + bg opacity + border

glass rounded-2xl p-6 3xl:p-8 text-white text-center

Base Element Styles

Style your global elements

@layer base {
  h1 {
    @apply font-bold tracking-tight text-transparent
           bg-clip-text bg-linear-to-r
           from-slate-900 to-slate-500
           dark:from-white dark:to-slate-400;
  }
}

Live h1 Demo

No class needed — this h1 inherits the gradient from @layer base.