Tailwind CSS UI Prompts

Build a responsive navigation bar with Tailwind CSS. Desktop: horizontal nav with logo (left), links (center), and CTA button (right) using 'flex items-center justify-between max-w-7xl mx-auto px-6 h-16'. Mobile: hamburger menu button that toggles a full-screen overlay nav using 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center gap-8'. Breakpoint: 'md' for the switch. Include smooth transition with 'transition-all duration-300'. Support dark mode with 'dark:bg-zinc-950 dark:text-white'.

Create a responsive card grid using shadcn/ui and Tailwind. Grid: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'. Each card: shadcn Card with CardHeader (image placeholder, aspect-video), CardContent (title in font-semibold, description in text-sm text-muted-foreground), CardFooter (price badge and action button). Cards should have 'hover:shadow-lg transition-shadow' and 'group' class for hover effects on the image (scale-105). Include skeleton loading state using shadcn Skeleton component.

Build a multi-step form with Tailwind CSS in Next.js. Container: 'max-w-2xl mx-auto py-12 px-6'. Step indicator: horizontal dots connected by lines, active step highlighted. Each step: form fields using 'space-y-6' with labels in 'text-sm font-medium' and inputs in 'w-full px-3 py-2 border border-zinc-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-zinc-900 dark:border-zinc-700'. Navigation: 'flex justify-between mt-8' with Back/Next buttons. Animate step transitions with 'transition-opacity duration-200'.

Generate a Tailwind CSS configuration with a complete design token system. Include: custom color palette (primary, secondary, accent, success, warning, danger, each with 50-950 shades), spacing scale extending the default (adding 18, 22, 30 for fine-grained control), custom font family stack (sans, serif, mono), border-radius tokens (none, sm, md, lg, xl, full), box-shadow tokens (sm, md, lg, xl, glow), and custom animation tokens (fade-in, slide-up, scale-in). Also create CSS custom properties that mirror the tokens for use in non-Tailwind contexts. Output as a tailwind.config.ts file.

Set up a Tailwind CSS v4 project theme using the CSS-first configuration (no tailwind.config.js). In globals.css: '@import "tailwindcss";' followed by an @theme block defining --color-brand-50 through --color-brand-950 (base #4f46e5), --font-sans: 'Inter', system-ui, --radius-card: 1rem, and --spacing-section: 6rem. Add a custom dark variant with '@custom-variant dark (&:where(.dark, .dark *))'. Demonstrate usage: a hero section with bg-brand-600 text-white, cards using rounded-[--radius-card], and section padding py-[--spacing-section]. Include one @utility definition for a text-balance helper. All interactive elements need focus-visible:ring-2 ring-brand-500.

Create a responsive dashboard shell with shadcn/ui and Tailwind. Desktop: CSS grid 'grid-cols-[240px_1fr]' with a sidebar (border-r border-zinc-200 dark:border-zinc-800, nav items 'flex items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800', active item bg-zinc-100 font-medium). Mobile: sidebar becomes a shadcn Sheet triggered from the top bar. Top bar: h-14 with breadcrumbs, a search input (w-64, pl-9 with an absolute icon), and an avatar dropdown. Content: 'p-6 lg:p-8 space-y-6' with a 4-card stat row 'grid gap-4 sm:grid-cols-2 lg:grid-cols-4'. Sidebar nav needs aria-current on the active link.

Build three reusable marketing sections in Next.js with Tailwind. Hero: 'py-24 lg:py-32' with headline 'text-5xl lg:text-6xl font-bold tracking-tight text-balance', subtext 'mt-6 text-lg text-zinc-600 max-w-2xl mx-auto', dual CTAs (primary bg-zinc-900 text-white, secondary ring-1 ring-zinc-300). Logo cloud: 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8 items-center' with grayscale logos gaining color on hover. Feature bento: 'grid lg:grid-cols-3 gap-4' where the first card spans lg:col-span-2, each 'rounded-2xl bg-zinc-50 p-8 ring-1 ring-zinc-200'. Dark mode via dark: variants throughout; headings must maintain 4.5:1 contrast in both themes.

Generate a reusable TypeScript DataTable component styled purely with Tailwind. Wrapper: 'overflow-x-auto rounded-lg ring-1 ring-zinc-200 dark:ring-zinc-800'. Table: 'w-full text-sm', header 'bg-zinc-50 dark:bg-zinc-900 text-left text-xs font-medium uppercase tracking-wide text-zinc-500', cells 'px-4 py-3 border-t border-zinc-100 dark:border-zinc-800'. Features: sortable columns (chevron icons with aria-sort on th), row selection with a checkbox column, zebra striping via odd:bg-zinc-50/50, sticky header with 'sticky top-0', numeric columns right-aligned with tabular-nums, and a pagination footer 'flex items-center justify-between px-4 py-3'. Provide loading skeleton rows and an empty state. Use scope="col" on headers for screen readers.