Claude MarketplacesSubmit
cap-go avatar

Tailwind Capacitor

cap-go/capgo-skills

This walks you through styling Capacitor mobile apps with Tailwind CSS, covering the mobile-specific stuff that trips people up. You get safe area inset handling for notches and home indicators, proper touch target sizing (44px minimum), and configuration for dark mode with system preference detection. The source includes working examples for common mobile patterns like headers that respect the notch, bottom sheets, and touch feedback states. It also handles the tricky bits like disabling text selection except in inputs, preventing pull-to-refresh bounce, and making hover states work correctly on touch devices. If you're building a Capacitor app and want Tailwind to behave properly on actual phones, this covers the essentials.

skills.sh installs
1K
GitHub stars
77
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add cap-go/capgo-skills --skill tailwind-capacitor --agent claude-code

Installs into .claude/skills of the current project.

Files

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)

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/cap-go/capgo-skills
Categories
Frontend Development, Documentation, Code Review & Quality, Debugging, Mobile Development, Design & UI/UX
First seen
Jun 3, 2026

More from cap-go/capgo-skills

All 41

Recommended

More Frontend Development
1framix-team avataremail-html-mjmlframix-team/skill-email-html-mjmlResponsive HTML email template generation using MJML 4.x framework. Use when the user asks to create, generate, design, or build an email template — including w998skills.sh installs
2hairyf avatarreact-usehairyf/skillsCollection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management851skills.sh installs
3existential-birds avatartailwind-v4existential-birds/beagleTailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring da817skills.sh installs
4pproenca avatarreact-refactorpproenca/dot-skillsArchitectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling and791skills.sh installs
5ovachiever avatarreact-hook-form-zodovachiever/droid-tingsBuild type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with 724skills.sh installs
6getsentry avatarsentry-nextjs-sdkgetsentry/sentry-agent-skillsFull Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, 665skills.sh installs