Tailwind CSS in Capacitor Apps

When to Use

TRIGGER when:

• Adding Tailwind to a Capacitor app (Vite, Angular, Next static export, etc.)
• Upgrading Tailwind v3 -> v4, or a v4 install produces no styles
• tailwind.config.js edits have no effect (v4 is CSS-first)
• Colors / gradients broken or transparent on older iOS devices
• Safe-area, dark mode, platform-specific, or touch-target utilities

Do not use:

• Konsta UI setup/components: konsta-ui
• Ionic components and --ion-* variables: ionic-design
• SystemBars / Android edge-to-edge / status bar plugin: safe-area-handling
• Inputs hidden by keyboard: capacitor-keyboard
• Adding Capacitor to a framework: framework-to-capacitor

Version facts (October 2026)