tailwindcss

Tailwind CSS

Tailwind CSS is an efficient, utility-first CSS framework providing direct composition of modern responsive layouts with lightning-fast compilation.

When to Use

• Modern Utility-First Web Design: Rapidly styling HTML without leaving JSX/HTML templates.
• Tailwind CSS v4 CSS-First Projects: Streamlined setup using @theme and native CSS engine without JavaScript config files.
• Responsive & Dark-Mode Interfaces: Instant responsive breakpoint variants (md:, lg:) and dark mode (dark:).
• Design System Consistency: Enforcing standardized spacing scales, typography, and color tokens.

Quick Start

<div
  class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-8"
>
  <div class="md:flex">
    <div class="p-8">
      <div
        class="uppercase tracking-wide text-sm text-indigo-500 font-semibold"
      >
        Tailwind CSS
      </div>
      <p class="mt-2 text-slate-500">
        Utility-first CSS framework packed with classes.
      </p>
      <button
        class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
      >
        Action
      </button>
    </div>
  </div>
</div>

Core Concepts

Tailwind CSS v4 CSS-First Configuration

Configuring design tokens directly in native CSS with @theme:

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

@theme {
  --color-brand-primary: #4f46e5;
  --color-brand-accent: #06b6d4;
  --font-display: "Outfit", sans-serif;
  --radius-custom: 1rem;
}

Responsive, Accessible Card Layout

Combining flexbox, grid, hover states, and dark mode variants:

<div
  class="max-w-md mx-auto p-6 bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-slate-100 dark:border-slate-800 transition hover:shadow-xl"
>
  <div class="flex items-center space-x-4">
    <div
      class="flex-shrink-0 w-12 h-12 bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 rounded-xl flex items-center justify-center font-bold text-lg"
    >
      TS
    </div>
    <div>
      <h3 class="text-lg font-semibold text-slate-900 dark:text-white">
        Enterprise Scalability
      </h3>
      <p class="text-sm text-slate-500 dark:text-slate-400">
        Tailwind CSS v4 Engine
      </p>
    </div>
  </div>
  <p class="mt-4 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
    Ultra-fast build performance with zero config file ceremony.
  </p>
  <button
    class="mt-6 w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-medium text-sm rounded-lg transition focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
  >
    View Architecture
  </button>
</div>