MCPInstall

tailwind-capacitor

by cap-goFrontend & Design

Sets up and uses Tailwind CSS v4 in Capacitor apps - CSS-first config (@import "tailwindcss", @theme, @utility, @custom-variant, @source, @plugin), @tailwindcss/vite / @tailwindcss/postcss, upgrading from v3 tailwind.config.js with npx @tailwindcss/upgrade, WebView browser floor (Safari 16.4+ / Chrome 111+ vs Capacitor iOS 15/16 targets), safe-area utilities built on env(safe-area-inset-), platform variants (ios:/android: via a root class), class-based dark mode, pointer-coarse: touch targets, and hover-on-touch behavior. Use when installing Tailwind in a Capacitor project, styles do not apply after upgrading to v4, colors look wrong on older iPhones, or building mobile layouts with Tailwind. Do not use for Konsta UI components (konsta-ui), Ionic theming (ionic-design), native system bar / edge-to-edge config (safe-area-handling), or keyboard overlap (capacitor-keyboard).

Installs
960
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/cap-go/capgo-skills --skill tailwind-capacitor
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads tailwind-capacitor automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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)

  • tailwindcss 4.x is latest (4.3.x); 3.4.x on v3-lts.
  • v4 is configured in CSS. tailwind.config.js is not read unless you add @config "./tailwind.config.js";.
  • v4 targets Safari 16.4+, Chrome 111+, Firefox 128+ (uses @property, color-mix(), cascade layers, oklch).
  • Capacitor 8 supports iOS 15+, Capacitor 9 iOS 16+. WKWebView = the device's Safari version. Devices on iOS 15.x - 16.3 render v4 styles incorrectly. Android System WebView auto-updates, so Chrome 111+ is usually met (Capacitor 9 minSdk 26).

Decision: if the iOS deployment target (or real user base) includes iOS < 16.4, ask the user: stay on Tailwind 3.4, or raise the minimum OS. Do not silently ship v4.

Workflow

  1. Inspect: npm ls tailwindcss, tailwind.config.*, postcss.config.*, bundler config, main CSS file, ios/App/App.xcodeproj IPHONEOS_DEPLOYMENT_TARGET, presence of Ionic or Konsta.
  2. New install (below) or upgrade: references/v3-to-v4.md.
  3. Mobile utilities (safe areas, platform variants, touch, dark mode): references/mobile-patterns.md.
  4. Verify (below).

Only load a reference when its topic is in play.

Install (Vite: React, Vue, Svelte, Solid)

npm i tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ plugins: [tailwindcss() /* + framework plugin */] });

/* src/styles.css */
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant ios (&:where(.plt-ios, .plt-ios *));
@custom-variant android (&:where(.plt-android, .plt-android *));

@theme {
  --color-brand: oklch(0.55 0.2 265);
  --font-sans: system-ui, -apple-system, "Roboto", sans-serif;
}

@utility pt-safe { padding-top: env(safe-area-inset-top); }
@utility pb-safe { padding-bottom: env(safe-area-inset-bottom); }
@utility px-safe { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

Other toolchains: PostCSS (Angular, webpack, Next) -> npm i tailwindcss @tailwindcss/postcss and postcss.config.mjs { plugins: { "@tailwindcss/postcss": {} } }; standalone -> @tailwindcss/cli. Angular CLI 17+ reads .postcssrc.json.

// main.ts: platform class for ios:/android: variants
import { Capacitor } from '@capacitor/core';
document.documentElement.classList.add(`plt-${Capacitor.getPlatform()}`); // plt-ios | plt-android | plt-web

Add viewport-fit=cover to the viewport meta or the safe-area utilities resolve to 0.

Traps

  • Content detection is automatic in v4 (respects .gitignore). Classes in node_modules or outside the project root need @source "../path";. Dynamic class names (`bg-${color}-500`) are never generated; map to full class strings.
  • v4 hover: only applies on devices with (hover: hover), so sticky hover on touch is solved by default. Use active: for press feedback.
  • v4 defaults changed: border color is currentColor, ring is 1px, shadow-sm/shadow and rounded-sm/rounded scales shifted, outline-none -> outline-hidden. The upgrade tool renames most; review visually.
  • Ionic + Tailwind: Preflight resets Ionic typography. Import Tailwind without Preflight (@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities);) or load Ionic CSS after Tailwind.
  • Konsta UI v5 already imports Tailwind theme pieces via konsta/<fw>/theme.css; follow konsta-ui instead of duplicating setup.
  • Do not use 100vh for full-screen layouts; use h-dvh (v4 has dvh/svh/lvh utilities) or a flex shell.
  • Android WebView < 140 reports safe-area env() as 0; Capacitor 8 SystemBars injects --safe-area-inset-*. For Android robustness, use @utility pt-safe { padding-top: var(--safe-area-inset-top, env(safe-area-inset-top)); } (see safe-area-handling).

Verification

  1. npm run build succeeds; built CSS contains your utilities: grep -c "pt-safe" dist/assets/*.css.
  2. npx cap sync and run on: oldest supported iOS version (check colors, gradients, shadows render), current iPhone, Android 15/16.
  3. Toggle dark mode class and OS appearance; check ios:/android: variants by inspecting <html class>.
  4. Leftovers after upgrade: grep -rn "@tailwind base\|@tailwind components\|@tailwind utilities\|require('tailwindcss')" src postcss.config.* 2>/dev/null returns nothing.

Error Handling

Error / symptomCauseFix
[postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate packagev3-style PostCSS config with v4Use @tailwindcss/postcss (or @tailwindcss/vite)
No styles at allMissing @import "tailwindcss" or bundler pluginAdd both
Cannot apply unknown utility class in @applyCustom class not defined via @utility, or CSS module / Vue <style> without theme referenceDefine with @utility; add @reference "../styles.css"; in the scoped style
tailwind.config.js theme changes ignoredv4 does not auto-load JS configMove to @theme, or add @config
Transparent/missing colors on some iPhonesiOS < 16.4 lacks features v4 usesRaise min iOS or stay on 3.4
dark: follows OS, ignores toggleDefault dark variant is media-basedAdd @custom-variant dark (&:where(.dark, .dark *));
Upgrade tool fails: requires Node@tailwindcss/upgrade needs Node 20+Upgrade Node (Capacitor 9 needs 24+ anyway)

Resources

FAQ

What does the tailwind-capacitor skill do?

Sets up and uses Tailwind CSS v4 in Capacitor apps - CSS-first config (@import "tailwindcss", @theme, @utility, @custom-variant, @source, @plugin), @tailwindcss/vite / @tailwindcss/postcss, upgrading from v3 tailwind.config.js with npx @tailwindcss/upgrade, WebView browser floor (Safari 16.4+ / Chrome 111+ vs Capacitor iOS 15/16 targets), safe-area utilities built on env(safe-area-inset-), platform variants (ios:/android: via a root class), class-based dark mode, pointer-coarse: touch targets, and hover-on-touch behavior. Use when installing Tailwind in a Capacitor project, styles do not apply after upgrading to v4, colors look wrong on older iPhones, or building mobile layouts with Tailwind. Do not use for Konsta UI components (konsta-ui), Ionic theming (ionic-design), native system bar / edge-to-edge config (safe-area-handling), or keyboard overlap (capacitor-keyboard).

How do I install tailwind-capacitor?

Run npx skills add https://github.com/cap-go/capgo-skills --skill tailwind-capacitor in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwind-capacitor/ (personal) or .claude/skills/tailwind-capacitor/ (project).

Which AI agents can use tailwind-capacitor?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is tailwind-capacitor safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains tailwind-capacitor?

It is published by cap-go in cap-go/capgo-skills. It has 960 recorded installs.

More from cap-go/capgo-skills

View all →

capacitor-best-practices

cap-go/capgo-skills

Review and set up Capacitor apps against current best practices (Capacitor 8.5 stable, 9 alpha via @next). Use for a Capacitor codebase review, capacitor.config.ts audit, new project setup, aligning @capacitor/core/cli/ios/android and plugin majors, plugin patterns (availability checks, checkPermissions/requestPermissions, error code handling, web fallbacks), or release prep; or on " " plugin is not implemented on ios, Could not find the web assets directory, platform has not been added yet, a dev server.url shipped to production, lost edits in android/app/src/main/assets/public, SPM vs CocoaPods, or AppDelegate/UIScene drift. Do not use for security audits (capacitor-security), performance (capacitor-performance), tests (capacitor-testing), crashes (debugging-capacitor), major upgrades (capacitor-app-upgrades), SPM migration (cocoapods-to-spm), UIScene adoption (capacitor-uiscene-migration), or live updates (capgo-live-updates).

Code Quality & Workflow2.7K installs

ionic-design

cap-go/capgo-skills

Builds and reviews Ionic Framework UI in Capacitor apps (Ionic 9 current, Ionic 8 still common) - page structure (ion-header/ion-content/ion-footer), lists, modern form syntax (label/labelPlacement on ion-input/ion-select), sheet modals, tabs + ion-router-outlet, CSS variable theming, dark palettes (palettes/dark.system.css, .ion-palette-dark), iOS vs MD mode, and Ionic 8 - 9 breaking changes (React Router 6, Vue Router 5, Angular 18-22 zoneless, removed ion-picker-legacy, boolean autocorrect, npx @ionic/migrate). Use when writing Ionic components, theming an Ionic app, fixing platform-mode styling, or upgrading @ionic/react, @ionic/vue, @ionic/angular. Do not use for Konsta UI (konsta-ui), Tailwind setup (tailwind-capacitor), raw safe-area CSS (safe-area-handling), keyboard resize (capacitor-keyboard), or Ionic Appflow/Enterprise migrations (ionic-appflow-migration, ionic-enterprise-sdk-migration).

Frontend & Design1.6K installs

capacitor-plugins

cap-go/capgo-skills

Pick, install, and wire up Capacitor plugins for native features (camera, filesystem, geolocation, biometrics, in-app purchases, social login, SQLite, calendar, contacts, health, BLE, NFC, etc.). Covers official @capacitor/ packages (Capacitor 8.5 stable, 9 alpha on next) plus the 145-package @capgo/ index, native permission keys (Info.plist, AndroidManifest, variables.gradle minSdk), npx cap sync / cap ls verification, and errors like '"Camera" plugin is not implemented on ios', 'unable to find plugin', UNIMPLEMENTED, and OS-PLUG- codes. Use for "which plugin should I use for X", adding a plugin, or a plugin call failing after install. Do not use for push setup (capacitor-push-notifications), splash assets (capacitor-splash-screen), keyboard layout (capacitor-keyboard), deep links (capacitor-deep-linking), OTA updates (capgo-live-updates), upgrading plugin source code (capacitor-plugin-upgrades), or adding SPM to a plugin (capacitor-plugin-spm-support).

Frontend & Design1.6K installs

debugging-capacitor

cap-go/capgo-skills

Diagnoses and fixes runtime bugs in Capacitor iOS/Android apps - white/blank screen on launch, startup crashes, "X" plugin is not implemented on ios/android, net::ERRCLEARTEXTNOTPERMITTED, App Transport Security blocks, CORS on capacitor://localhost, permission denials, live reload not connecting, and Capacitor 8.5+ UIScene regressions (appUrlOpen, universal links, pause/resume silent because AppDelegate callbacks stopped). Covers Safari Web Inspector, chrome://inspect, Xcode/LLDB, Android Studio, npx cap run --url (Capacitor 9) vs -l --host (8), xcrun simctl openurlprivacypush, xcrun devicectl device process launchopenURL, xctrace. Do not use for only reading device logs (ios-android-logs), the UIScene migration itself (capacitor-uiscene-migration), deep-link setup (capacitor-deep-linking), speed (capacitor-performance), crash SDKs (capacitor-native-observability), tests (capacitor-testing), or upgrades/build errors (capacitor-app-upgrades, cocoapods-to-spm).

Code Quality & Workflow1.3K installs

capacitor-testing

cap-go/capgo-skills

Testing guide for Capacitor apps and plugins. Covers web-layer unit and component tests with Vitest and mocked Capacitor plugins (vi.mock('@capacitor/core'), registerPlugin), Playwright for the web build, Appium E2E with NATIVEAPP / WEBVIEW context switching, native plugin unit tests with Swift Testing vs XCTest (what can migrate, CAPPluginCall patterns, xcodebuild test on a simulator) and Android JUnit, plus an agent-driven verification loop on simulators and devices (build, install, launch, screenshot, UI hierarchy, tap, logs) with xcrun simctl, xcrun devicectl, adb, Xcode MCP device tools, and live reload via npx cap run --url (Capacitor 9) or -l --host --port (Capacitor 8). Use when adding tests, mocking plugins, "does it work on device", verifying a UI change on a simulator, migrating XCTest to Swift Testing, or setting up test CI. Do not use for crash log capture (ios-android-logs), WebView debugging sessions (debugging-capacitor), or build pipelines (capacitor

Testing & QA1.3K installs

safe-area-handling

cap-go/capgo-skills

Fixes notch, Dynamic Island, home indicator, display cutout, and system bar overlap in Capacitor apps. Covers viewport-fit=cover + env(safe-area-inset-), the Capacitor 8 SystemBars core plugin (insetsHandling, injected --safe-area-inset- CSS variables for Android WebView < 140, removal of android.adjustMarginsForEdgeToEdge), Android 15/16 enforced edge-to-edge (overlaysWebView and backgroundColor of @capacitor/status-bar no longer work at targetSdk 36), iOS contentInset, and insets that change at runtime on rotation, iPad/foldable resizable windows. Use when headers sit under the status bar, tab bars hide behind the gesture bar, env() returns 0 on Android, or layout broke after upgrading to Capacitor 8 / targetSdk 35+. Do not use for keyboard overlap (capacitor-keyboard), Ionic/Konsta component theming (ionic-design, konsta-ui), Tailwind utility setup (tailwind-capacitor), or iOS multi-window/resizability adoption (capacitor-ios-resizability).

Mobile1.3K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs