To convert a Tailwind project to an APK, compile Tailwind to a static CSS file with the Tailwind CLI (or your build tool), link that file instead of the Play CDN script, make paths relative, then ZIP the output with index.html at the top and build it. The compiled CSS is usually 10–30 KB and works offline.
Key takeaways
- Never ship the Tailwind Play CDN script in an app — it needs a connection and slows start-up.
- Compile once with the CLI; the output CSS is tiny and offline-safe.
- Use the
dark:variant with the media strategy so the app follows the phone's theme.
Why the Play CDN does not belong in an APK
The <script src="https://cdn.tailwindcss.com"> tag (or the v4 @tailwindcss/browser script) downloads a compiler and generates CSS on every launch. In an app that means a blank-white flash, no styles at all offline, and extra battery use. Tailwind itself says the CDN is for development only.
Compile with the standalone CLI
No Node project needed — the standalone CLI is a single executable. For Tailwind v4:
/* src/input.css */
@import "tailwindcss";# scans your HTML for class names and writes the CSS
npx @tailwindcss/cli -i ./src/input.css -o ./css/app.css --minifyThen replace the CDN script with the file:
<link rel="stylesheet" href="css/app.css">For a Vite or Next static export, Tailwind is already compiled into the build output — ZIP the dist/ or out/ folder instead, after setting a relative base path (base: './' in Vite).
Dark mode that follows the phone
Tailwind's default dark: variant uses prefers-color-scheme, which Android WebView reports from the system setting. Keep that default rather than a class toggle unless your app has its own theme switch. More in dark mode for HTML apps.
Edge-to-edge and safe areas
If your app runs full-screen, content can slide under the status bar or gesture bar. Tailwind does not ship safe-area utilities, but arbitrary values work:
<header class="pt-[env(safe-area-inset-top)] sticky top-0 bg-white dark:bg-slate-900">…</header>
<nav class="pb-[env(safe-area-inset-bottom)] fixed bottom-0 inset-x-0">…</nav>These require viewport-fit=cover in the viewport meta tag.
Touch sizing
Tailwind's p-2 buttons end up around 36px tall. Use min-h-12 min-w-12 (48px) for tappable elements and check with the touch target checker. Replace hover: effects that reveal content with active: states — hover does not exist on a touchscreen.
Build
ZIP index.html, css/app.css and your images, then build in HTML & ZIP to APK Builder. Test once in airplane mode to confirm no CDN is left.
Frequently asked questions
Will Tailwind's CDN work in an APK?
Only while the phone is online, and with a visible delay on every launch. Compile Tailwind to a CSS file for any app.
Do I need Node.js to compile Tailwind?
No. Tailwind's standalone CLI is a single executable for macOS, Windows and Linux that needs no Node installation.