How do you implement responsive design and mobile-first development?

Responsive design ensures optimal user experience across all viewport sizes. Mobile-first approach: start designing for the smallest screen, then progressively enhance for larger screens using min-width media queries. This ensures the base experience works on all devices and additional complexity is layered on for capable devices. CSS implementation with Tailwind: use the default breakpoint system (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px), apply mobile styles as the default, and add responsive variants for larger screens (text-sm md:text-base lg:text-lg). Layout strategies: CSS Grid for two-dimensional layouts (grid-cols-1 md:grid-cols-2 lg:grid-cols-3), Flexbox for one-dimensional layouts and alignment, and Container Queries for component-level responsiveness. Typography: use fluid typography (clamp() function: font-size: clamp(1rem, 2.5vw, 2rem)) for smooth scaling between breakpoints, maintain readable line lengths (45-75 characters per line), and use relative units (rem, em) instead of fixed pixels. Images: use responsive images (srcset for resolution switching, sizes for viewport-aware loading), implement lazy loading (loading="lazy" attribute), serve modern formats (WebP, AVIF) with fallbacks, and optimize image dimensions for each breakpoint. Touch optimization: minimum touch target size of 44x44px (Apple HIG) or 48x48px (Material Design), adequate spacing between interactive elements, implement touch-friendly gestures (swipe for navigation, pull-to-refresh), and avoid hover-dependent interactions on mobile. Testing: test on real devices (not just browser resize), use Chrome DevTools device emulation for rapid iteration, test with actual slow network connections, and verify touch interactions on mobile devices. Performance: mobile devices have limited processing power and bandwidth, so optimize JavaScript bundle sizes, minimize render-blocking resources, and implement critical CSS for fast first paint.