Guide to using Tailwind CSS in Capacitor mobile apps. Covers mobile-first design, touch targets, safe areas, dark mode, and performance optimization. Use this skill when users want to style Capacitor apps with Tailwind.

Tailwind CSS for Capacitor Apps Build beautiful mobile apps with Tailwind CSS and Capacitor. When to Use This Skill User is using Tailwind in Capacitor app User asks about mobile styling User needs responsive mobile design User wants dark mode with Tailwind User needs safe area handling Getting Started Installation Configuration Import Styles Safe Area Handling Utility Classes Usage in Components Touch Friendly Design Minimum Touch Targets Touch Feedback Disable Hover on Touch Or use media query: Dark Mode System Dark Mode Manual Dark Mode Dark Mode Components Mobile Patterns Pull to Refresh Container Bottom Sheet Swipe Actions Fixed Header with Blur Performance Optimization Reduce Bundle Size GPU Acceleration Avoid Layout Thrashing Component Examples Mobile List Item Mobile Button Mobile Input Resources Tailwind CSS Documentation: https://tailwindcss.com/docs Tailwind Mobile Patterns: https://tailwindui.com/ CSS Safe Area Guide: https://webkit.org/blog/7929/designing websites for iphone x/

tailwind-capacitor