--- description: Learn how to create a custom Tailwind CSS plugin for the Ionic Framework to apply platform-specific styles for Android and iOS in your applications. title: Tailwind CSS Plugin for Ionic Framework - Capawesome image: https://capawesome.io/docs/assets/images/social/blog/tailwind-css-plugin-for-ionic-framework.png --- [Skip to content ](#tailwind-css-plugin-for-ionic-framework) [🖥️ Introducing the **Capacitor Electron Platform** — build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Intercom ](/docs/sdks/capacitor/intercom/) * [ Intune ](/docs/sdks/capacitor/intune/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Tauri ](/docs/sdks/capacitor/tauri/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ YouTube Player ](/docs/sdks/capacitor/youtube-player/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ Usage ](#usage) * [ Real-World Use Cases ](#real-world-use-cases) * [ Bonus: Adding a Web-Specific Variant ](#bonus-adding-a-web-specific-variant) * [ FAQ ](#faq) * [ Related Posts ](#related-posts) * [ Conclusion ](#conclusion) # Tailwind CSS Plugin for Ionic Framework[¶](#tailwind-css-plugin-for-ionic-framework "Permanent link") Tailwind CSS is a popular utility-first CSS framework that allows developers to build custom designs quickly. In this guide, we will show you how to create a simple Tailwind CSS plugin for the Ionic Framework that adds platform-specific variants for Android and iOS. [ ![Build and deploy your Capacitor app with Capawesome Cloud](https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png?t=1) ](/) ## Introduction[¶](#introduction "Permanent link") A common requirement for Ionic apps is to apply different styles based on the platform. For example, you might want to use a different background color for Android and iOS. This can be achieved by creating a custom Tailwind CSS plugin that adds platform-specific variants. ## Creating the Plugin[¶](#creating-the-plugin "Permanent link") Plugins in Tailwind CSS allow you to extend the framework's functionality by adding custom utilities, components, or variants. In this case, we will create a plugin that adds `ios:` and `android:` variants to target specific platforms. To create the plugin, you need to set up your Tailwind CSS configuration file (`tailwind.config.js`) and define the custom variants. Here’s how you can do it: `[](#%5F%5Fcodelineno-0-1)const plugin = require('tailwindcss/plugin'); [](#%5F%5Fcodelineno-0-2) [](#%5F%5Fcodelineno-0-3)module.exports = { [](#%5F%5Fcodelineno-0-4) content: ['./src/**/*.{html,ts}'], [](#%5F%5Fcodelineno-0-5) plugins: [ [](#%5F%5Fcodelineno-0-6) plugin(function ({ addVariant }) { [](#%5F%5Fcodelineno-0-7) addVariant('android', '.md &'); [](#%5F%5Fcodelineno-0-8) addVariant('ios', '.ios &'); [](#%5F%5Fcodelineno-0-9) }) [](#%5F%5Fcodelineno-0-10) ] [](#%5F%5Fcodelineno-0-11)}; ` In this code snippet, we are using the `addVariant` function from Tailwind CSS to create two new variants: `android` and `ios`. The `.md &` selector targets Android devices, while the `.ios &` selector targets iOS devices. This allows us to apply styles conditionally based on the platform. Both, the `md` and `ios` classes are automatically added by Ionic Framework when the app is running on the respective platform. ### Where Do the `ios` and `md` Classes Come From?[¶](#where-do-the-ios-and-md-classes-come-from "Permanent link") Ionic determines the active **mode** — `ios` or `md` — at startup and adds the corresponding class to the root of your app. By default this is based on the platform the app is actually running on (iOS gets `ios`, Android and the web get `md`), but the mode isn't strictly tied to the physical device: it can also be forced explicitly via Ionic's `mode` config, which is useful when you want to preview or test one platform's styling while running on another. Since these Tailwind variants are just CSS selectors keyed off that class, they follow whatever mode Ionic has set — not the raw platform your JavaScript would report from `Capacitor.getPlatform()`. That distinction matters in practice: if you force `mode: 'ios'` for a demo build running on Android, the `ios:` variant applies and the `android:` variant doesn't, even though the app is technically on an Android device. Tailwind CSS v4 and later If you are using Tailwind CSS v4 or later, you have to declare those variants directly in your CSS file since no Tailwind CSS configuration file is used anymore. You can do this by adding the following code to your CSS file: `[](#%5F%5Fcodelineno-1-1)@custom-variant android (.md &); [](#%5F%5Fcodelineno-1-2)@custom-variant ios (.ios &); ` ## Usage[¶](#usage "Permanent link") Now that we have created the plugin, we can use the `ios:` and `android:` variants in our Tailwind CSS classes. For example: `[](#%5F%5Fcodelineno-2-1)
[](#%5F%5Fcodelineno-2-2) This div will have a primary background color on iOS and a secondary background color on Android. [](#%5F%5Fcodelineno-2-3)
` ## Real-World Use Cases[¶](#real-world-use-cases "Permanent link") Background color swaps are the simplest example, but the more common reason to reach for platform variants is matching each platform's own design conventions — the same way Ionic's built-in components already look different in `ios` vs `md` mode. A few patterns that come up often: **Button shape.** iOS's Human Interface Guidelines favor fully rounded, pill-shaped buttons, while Material Design uses a smaller, consistent corner radius: `[](#%5F%5Fcodelineno-3-1) ` **Tap feedback.** iOS conventionally dims a pressed element's opacity, while Material Design uses a ripple or a visible highlight color. If you're building custom pressable elements instead of relying on `ion-button`, you can express that directly: `[](#%5F%5Fcodelineno-4-1)
[](#%5F%5Fcodelineno-4-2) Tap me [](#%5F%5Fcodelineno-4-3)
` **Typography.** Font choice is one of the most common platform differences — iOS defaults to San Francisco, Android to Roboto. If you've registered custom font utilities for each (e.g. `font-sf` and `font-roboto` mapped to platform-appropriate font stacks in your Tailwind theme), the variants let you switch between them declaratively instead of branching in JavaScript: `[](#%5F%5Fcodelineno-5-1)

[](#%5F%5Fcodelineno-5-2) Platform-native body text [](#%5F%5Fcodelineno-5-3)

` **Spacing and density.** Material Design's spacing scale tends to run slightly denser than iOS's, so list items, form fields, or card padding are a common candidate for a per-platform tweak: `[](#%5F%5Fcodelineno-6-1)
[](#%5F%5Fcodelineno-6-2) List item content [](#%5F%5Fcodelineno-6-3)
` None of this replaces safe-area handling for notches, status bars, or home indicators — that's a separate, cross-platform CSS concern covered in [Capacitor Edge-to-Edge & Safe Areas: The Complete Guide](/blog/capacitor-edge-to-edge-and-safe-areas-guide/). The `ios:`/`android:` variants are about deliberate design differences, not device geometry. ## Bonus: Adding a Web-Specific Variant[¶](#bonus-adding-a-web-specific-variant "Permanent link") If your app also runs as a web build (not just packaged for iOS and Android), you may want to style that case separately from Android, since Ionic applies the same `md` class to both by default. The `ios:`/`android:` variants alone can't distinguish "actually on Android" from "running in a browser," but `Capacitor.isNativePlatform()` can — it returns `false` on the web and `true` on a native iOS or Android build. Add your own class explicitly at startup based on that check: `[](#%5F%5Fcodelineno-7-1)import { Capacitor } from '@capacitor/core'; [](#%5F%5Fcodelineno-7-2) [](#%5F%5Fcodelineno-7-3)if (!Capacitor.isNativePlatform()) { [](#%5F%5Fcodelineno-7-4) document.documentElement.classList.add('web'); [](#%5F%5Fcodelineno-7-5)} ` Then register a matching variant alongside the other two: `[](#%5F%5Fcodelineno-8-1)plugin(function ({ addVariant }) { [](#%5F%5Fcodelineno-8-2) addVariant('android', '.md &'); [](#%5F%5Fcodelineno-8-3) addVariant('ios', '.ios &'); [](#%5F%5Fcodelineno-8-4) addVariant('web', '.web &'); [](#%5F%5Fcodelineno-8-5)}) ` Or in Tailwind CSS v4: `[](#%5F%5Fcodelineno-9-1)@custom-variant web (.web &); ` Now `web:` styles apply only when the app isn't running as a native iOS or Android build — handy for hiding native-only UI (like a status bar spacer) or showing web-only elements (like a "Download the app" banner) without extra JavaScript conditionals scattered through your components. ## FAQ[¶](#faq "Permanent link") ### How does Ionic decide whether to apply the `md` or `ios` class in the first place?[¶](#how-does-ionic-decide-whether-to-apply-the-md-or-ios-class-in-the-first-place "Permanent link") Ionic detects the running platform at startup (based on `Capacitor.getPlatform()` and the device's user agent) and adds the corresponding mode class — `md` for Android and other Material Design contexts, `ios` for iOS — to the root element automatically. This plugin's variants simply hook into classes Ionic already applies; you don't need to set them yourself. ### Do I need this plugin if my app is web-only and never runs on a real device?[¶](#do-i-need-this-plugin-if-my-app-is-web-only-and-never-runs-on-a-real-device "Permanent link") Not usefully — on the web, Ionic still assigns a mode (typically `md` unless you're testing in an iOS-simulating browser context), so the variants technically still work, but the platform-specific styling this plugin is designed for is mainly meaningful once the app actually runs on Android or iOS. ### Why does the Tailwind v4 syntax look so different from the v3 config-based version?[¶](#why-does-the-tailwind-v4-syntax-look-so-different-from-the-v3-config-based-version "Permanent link") Because Tailwind CSS v4 removed the JavaScript configuration file entirely in favor of CSS-native configuration. `addVariant` inside `plugin(function ({ addVariant }) {...})` was how you registered a custom variant in v3's `tailwind.config.js`; the `@custom-variant` at-rule is v4's direct CSS equivalent, achieving the same result without a config file at all. ### Can I combine the `ios:` and `android:` variants with other Tailwind variants like `hover:` or `dark:`?[¶](#can-i-combine-the-ios-and-android-variants-with-other-tailwind-variants-like-hover-or-dark "Permanent link") Yes — custom variants created with `addVariant` (or `@custom-variant` in v4) compose the same way built-in Tailwind variants do, so combinations like `ios:dark:bg-primary` work as expected, applying only when both conditions are true simultaneously. ## Related Posts[¶](#related-posts "Permanent link") * [Capacitor Edge-to-Edge & Safe Areas: The Complete Guide](/blog/capacitor-edge-to-edge-and-safe-areas-guide/) * [Install Tailwind CSS with Ionic Framework](/blog/install-tailwind-css-with-ionic-framework/) ## Conclusion[¶](#conclusion "Permanent link") With this simple Tailwind CSS plugin, you can easily apply platform-specific styles in your Ionic applications. This approach allows you to maintain a clean and organized codebase while leveraging the power of Tailwind CSS. To stay updated with the latest updates, features, and news about the Capawesome, Capacitor, and Ionic ecosystem, subscribe to the [Capawesome newsletter](/newsletter/) and follow us on [X (formerly Twitter)](https://x.com/capawesomeio). If you have any questions or need assistance with Capacitor, Ionic Framework, or Tailwind CSS, feel free to reach out to the Capawesome team. We are here to help you build amazing applications with the best tools available. July 17, 2026 Back to top ```json { "@context": "https://schema.org", "@type": "BlogPosting", "headline": "Tailwind CSS Plugin for Ionic Framework", "description": "Learn how to create a custom Tailwind CSS plugin for the Ionic Framework to apply platform-specific styles for Android and iOS in your applications.", "image": "https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png", "datePublished": "2025-07-07T00:00:00+00:00", "dateModified": "2026-07-17T00:00:00+00:00", "author": [ { "@type": "Person", "name": "Robin Genz", "url": "https://github.com/robingenz" } ], "publisher": { "@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": { "@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg" } }, "articleSection": "Guides", "keywords": ["Guides", "Ionic Framework"], "isPartOf": { "@type": "Blog", "@id": "https://capawesome.io/blog/#blog" }, "mainEntityOfPage": "https://capawesome.io/blog/tailwind-css-plugin-for-ionic-framework/", "url": "https://capawesome.io/blog/tailwind-css-plugin-for-ionic-framework/" } { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://capawesome.io/" }, { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://capawesome.io/blog/" }, { "@type": "ListItem", "position": 3, "name": "Tailwind CSS Plugin for Ionic Framework", "item": "https://capawesome.io/blog/tailwind-css-plugin-for-ionic-framework/" } ] } {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Where Do the ios and md Classes Come From?", "acceptedAnswer": {"@type": "Answer", "text": "Ionic determines the active mode — ios or md — at startup and adds the corresponding class to the root of your app. By default this is based on the platform the app is actually running on (iOS gets ios, Android and the web get md), but the mode isn't strictly tied to the physical device: it can also be forced explicitly via Ionic's mode config, which is useful when you want to preview or test one platform's styling while running on another. Since these Tailwind variants are just CSS selectors keyed off that class, they follow whatever mode Ionic has set — not the raw platform your JavaScript would report from Capacitor.getPlatform(). That distinction matters in practice: if you force mode: 'ios' for a demo build running on Android, the ios: variant applies and the android: variant doesn't, even though the app is technically on an Android device. Tailwind CSS v4 and later If you are using Tailwind CSS v4 or later, you have to declare those variants directly in your CSS file since no Tailwind CSS configuration file is used anymore. You can do this by adding the following code to your CSS file: @ custom-variant android (. md &); @ custom-variant ios (. ios &);"}}, {"@type": "Question", "name": "How does Ionic decide whether to apply the md or ios class in the first place?", "acceptedAnswer": {"@type": "Answer", "text": "Ionic detects the running platform at startup (based on Capacitor.getPlatform() and the device's user agent) and adds the corresponding mode class — md for Android and other Material Design contexts, ios for iOS — to the root element automatically. This plugin's variants simply hook into classes Ionic already applies; you don't need to set them yourself."}}, {"@type": "Question", "name": "Do I need this plugin if my app is web-only and never runs on a real device?", "acceptedAnswer": {"@type": "Answer", "text": "Not usefully — on the web, Ionic still assigns a mode (typically md unless you're testing in an iOS-simulating browser context), so the variants technically still work, but the platform-specific styling this plugin is designed for is mainly meaningful once the app actually runs on Android or iOS."}}, {"@type": "Question", "name": "Why does the Tailwind v4 syntax look so different from the v3 config-based version?", "acceptedAnswer": {"@type": "Answer", "text": "Because Tailwind CSS v4 removed the JavaScript configuration file entirely in favor of CSS-native configuration. addVariant inside plugin(function ({ addVariant }) {...}) was how you registered a custom variant in v3's tailwind.config.js; the @custom-variant at-rule is v4's direct CSS equivalent, achieving the same result without a config file at all."}}, {"@type": "Question", "name": "Can I combine the ios: and android: variants with other Tailwind variants like hover: or dark:?", "acceptedAnswer": {"@type": "Answer", "text": "Yes — custom variants created with addVariant (or @custom-variant in v4) compose the same way built-in Tailwind variants do, so combinations like ios:dark:bg-primary work as expected, applying only when both conditions are true simultaneously."}}], "url": "https://capawesome.io/blog/tailwind-css-plugin-for-ionic-framework/"} ```