--- name: tailwind_mastery router_kit: AIKit description: Tailwind CSS v4, design tokens, responsive patterns and utility-first CSS best practices. metadata: skillport: category: design tags: [agents, algorithms, artificial intelligence, automation, chatbots, cognitive services, deep learning, embeddings, frameworks, generative ai, inference, large language models, llm, machine learning, model fine-tuning, natural language processing, neural networks, nlp, openai, prompt engineering, rag, retrieval augmented generation, tailwind mastery, tools, vector databases, workflow automation] - responsive --- # 🎨 Tailwind Mastery > Tailwind CSS v4 and utility-first CSS best practices guide. --- ## 📋 Table of Contents 1. [Tailwind v4 Innovations](#1-tailwind-v4-innovations) 2. [Design System](#2-design-system) 3. [Responsive Patterns](#3-responsive-patterns) 4. [Component Patterns](#4-component-patterns) 5. [Dark Mode](#5-dark-mode) 6. [Performance](#6-performance) --- ## 1. Tailwind v4 Innovations ### CSS-First Configuration ```css \/* app.css *\/ @import "tailwindcss"; @theme { --color-primary: #3b82f6; --color-secondary: #10b981; --font-display: "Inter", sans-serif; --spacing-128: 32rem; } ``` ### Otomatik Content Detection ```css \/* v4: Automatic - only used classes included in bundle *\/ ``` ### Native CSS Features ```css \/* Container Queries *\/ @container (min-width: 400px) { .card { \/* styles *\/ } } \/* v4 utility *\/

...<\/div> <\/div> ``` --- ## 2. Design System ### Spacing Scale ```html

``` ### Typography Scale ```html

``` ### Color System ```html

``` ### Custom Theme ```css @theme { \/* Colors \/ --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; --color-brand-900: #1e3a8a; \/ Typography \/ --font-sans: "Inter", system-ui, sans-serif; --font-mono: "Fira Code", monospace; \/ Shadows *\/ --shadow-soft: 0 2px 15px -3px rgb(0 0 0 \/ 0.1); } ``` --- ## 3. Responsive Patterns ### Breakpoints ```html
``` ### Responsive Grid ```html

Item 1<\/div>
Item 2<\/div>
Item 3<\/div> <\/div> ``` ### Responsive Typography ```html
Responsive Title <\/h1> ``` ### Hide\/Show ```html
Desktop only<\/div>
Mobile only<\/div> ``` --- ## 4. Component Patterns ### Card ```html

Title<\/h3>
Content<\/p> <\/div> ``` ### Button Variants ```html