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.
Build beautiful mobile apps with Tailwind CSS and Capacitor.
bun add -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx,vue,svelte}',
],
theme: {
extend: {
// Mobile-first spacing
spacing: {
'safe-top': 'env(safe-area-inset-top)',
'safe-bottom': 'env(safe-area-inset-bottom)',
'safe-left': 'env(safe-area-inset-left)',
'safe-right': 'env(safe-area-inset-right)',
},
// Minimum touch targets (44px)
minHeight: {
'touch': '44px',
},
minWidth: {
'touch': '44px',
},
},
},
plugins: [],
};
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Mobile-specific base styles */
@layer base {
html {
/* Prevent text size adjustment on orientation change */
-webkit-text-size-adjust: 100%;
/* Smooth scrolling */
scroll-behavior: smooth;
/* Prevent pull-to-refresh on overscroll */
overscroll-behavior: none;
}
body {
/* Prevent text selection on long press */
-webkit-user-select: none;
user-select: none;
/* Disable callout on long press */
-webkit-touch-callout: none;
/* Prevent elastic scrolling on iOS */
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Enable text selection in inputs */
input, textarea {
-webkit-user-select: text;
user-select: text;
}
}
// tailwind.config.js