Styling

This project uses Tailwind CSS 4 for utility-first styling and shadcn/ui for pre-built, accessible UI components. Together they provide a fast, consistent design system that is easy to customize and extend.

Stack overview

Layer	Role
Tailwind CSS 4	Utility classes, responsive design, color system
shadcn/ui	Copy-paste component library built on Radix primitives
CSS variables	Theme tokens for colors, spacing, and radii
OKLCH colors	Perceptually uniform color space used by Tailwind 4

How it fits together

Tailwind 4 introduces a CSS-first configuration model. Instead of a tailwind.config.ts file, you define your design tokens directly in CSS using @theme. shadcn/ui components consume those tokens through CSS variables, making theming a matter of updating a few values in globals.css.

Sub-topics

Tailwind CSS 4 — new features, CSS-first config, OKLCH colors
shadcn/ui Components — adding and customizing components
Custom Themes — theming with CSS variables and dark mode
Responsive Patterns — breakpoints, grids, and mobile-first layout

Quick example

import { Button } from "@/components/ui/button";

export function Hero() {
  return (
    <section className="flex min-h-[60vh] flex-col items-center justify-center gap-6 px-4">
      <h1 className="text-4xl font-bold tracking-tight md:text-6xl">
        Build faster
      </h1>
      <p className="max-w-md text-center text-muted-foreground">
        A modern stack with real-time data and beautiful defaults.
      </p>
      <Button size="lg">Get started</Button>
    </section>
  );
}

The example above uses Tailwind utilities for layout and typography, a shadcn/ui Button for the call-to-action, and the text-muted-foreground token for theme-aware color.