Styling

Tailwind CSS 4 configuration and conventions.

On this page

CSS-First Configuration

Tailwind 4 uses CSS-first configuration via the @theme directive. No tailwind.config.js needed.

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.55 0.15 250);
  --font-sans: "Inter", system-ui, sans-serif;
  --spacing-18: 4.5rem;
}

Source Directive

Tell Tailwind where to scan for class usage:

@source "../../../src/**/*.njk";
@source "../../../src/**/*.md";
@source "../../../src/**/*.html";

Theme Tokens

Colors

@theme {
  --color-brand-50: oklch(0.97 0.01 250);
  --color-brand-500: oklch(0.55 0.15 250);
  --color-brand-900: oklch(0.25 0.08 250);
}

Fonts

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Spacing

@theme {
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
}

CSS Layers

@layer base {
  /* Global element defaults */
  html { scroll-behavior: smooth; }
}

@layer components {
  /* Reusable component classes */
  .btn { @apply px-4 py-2 rounded-lg; }
}

@layer utilities {
  /* Custom utilities */
  .scroll-mt-20 { scroll-margin-top: 5rem; }
}

Responsive Design

Mobile-first with standard breakpoints:

  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>