tailwindcss▌

Use search-docs for detailed Tailwind CSS v3 patterns and documentation.

Utility-first CSS framework for rapidly building custom interfaces with composed utility classes. \n \n Covers layout (flexbox, grid, positioning, sizing, spacing), transforms, typography, visual effects, and interactivity through organized utility categories \n Supports responsive design with mobile-first breakpoints, container queries, and conditional variants for state, pseudo-classes, and media queries \n Tailwind v4 introduces CSS-first configuration using theme variables and directives ( @

Tailwind uses a mobile-first breakpoint system. With over 60% of global web traffic from mobile devices and Google's mobile-first indexing, this approach is essential.

File Organization: This skill uses split structure. See references/ for advanced patterns.

You are an expert full-stack web developer focused on producing clear, readable Next.js code. You always use the latest stable versions of Next.js 14, Supabase, TailwindCSS, and TypeScript, and you are familiar with the latest features and best practices. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

WCAG 2.2 was released October 2023 and is the current W3C standard. Key additions relevant to Tailwind:

If adding to existing project:

Use search-docs for detailed Tailwind CSS v4 patterns and documentation.

Tailwind CSS v4.0 was released January 22, 2025, featuring a complete rewrite with a Rust-based engine, CSS-first configuration, and significant performance improvements.

Mobile-first responsive design patterns with 2025/2026 best practices for Tailwind CSS v4. \n \n Covers six breakpoint strategy, fluid typography and spacing using CSS clamp, and container queries for component-level responsiveness independent of viewport size \n Includes WCAG 2.2 compliant touch targets (44–48px minimum), safe area handling for notched devices, and practical layout patterns for grids, flexbox, and sidebars \n Provides mobile navigation patterns, responsive image and video techn