--- description: Learn how to integrate Tailwind CSS 4.0 with the Ionic Framework for Angular, React, and Vue projects. Build responsive, modern apps with ease using this guide. title: Install Tailwind CSS with Ionic Framework - Capawesome image: https://capawesome.io/docs/assets/images/social/blog/install-tailwind-css-with-ionic-framework.png --- [Skip to content ](#install-tailwind-css-with-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) * [ Tip: Platform-Specific Styles ](#tip-platform-specific-styles) * [ FAQ ](#faq) * [ Conclusion ](#conclusion) # Install Tailwind CSS with Ionic Framework[¶](#install-tailwind-css-with-ionic-framework "Permanent link") Learn how to install and configure [Tailwind CSS](https://tailwindcss.com/) version 4.0 with the Ionic Framework across Angular, React, and Vue projects. This guide provides step-by-step instructions for integrating Tailwind's utility-first CSS framework into your Ionic applications, enabling you to build modern, responsive interfaces with ease. [ ![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") Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs quickly. When combined with the Ionic Framework, it offers developers the flexibility to create highly customized mobile and web applications while maintaining Ionic's native look and feel. Tailwind CSS version 4.0 introduces new features and improvements that make it even more powerful for building modern applications. This guide will walk you through the installation process for Angular, React, and Vue projects using the Ionic Framework. ## Prerequisites[¶](#prerequisites "Permanent link") Before you begin, ensure you have the following installed on your system: * [Node.js](https://nodejs.org/) (version 16 or higher) and [npm](https://www.npmjs.com/) * [Ionic CLI](https://ionicframework.com/docs/cli) installed globally You can install the Ionic CLI globally using: `[](#%5F%5Fcodelineno-0-1)npm install -g @ionic/cli ` Next, create a new Ionic project for your chosen framework: `[](#%5F%5Fcodelineno-1-1)npx ionic start my-ionic-app blank --type= [](#%5F%5Fcodelineno-1-2)cd my-ionic-app ` ## Installation[¶](#installation "Permanent link") ### Angular[¶](#angular "Permanent link") To install Tailwind CSS with your Ionic Angular project, follow these steps: 1. **Install Tailwind CSS and dependencies:** `[](#%5F%5Fcodelineno-2-1)npm install tailwindcss @tailwindcss/postcss postcss ` 2. **Configure PostCSS:** Create a `.postcssrc.json` file in your project root: `[](#%5F%5Fcodelineno-3-1){ [](#%5F%5Fcodelineno-3-2) "plugins": { [](#%5F%5Fcodelineno-3-3) "@tailwindcss/postcss": {} [](#%5F%5Fcodelineno-3-4) } [](#%5F%5Fcodelineno-3-5)} ` 3. **Import Tailwind in your styles:** Add the following to your `src/global.scss` file: `[](#%5F%5Fcodelineno-4-1)@import "tailwindcss"; ` 4. **Start the development server:** `[](#%5F%5Fcodelineno-5-1)npx ionic serve ` ### React[¶](#react "Permanent link") For Ionic React projects, the installation process uses Vite: 1. **Install Tailwind CSS:** `[](#%5F%5Fcodelineno-6-1)npm install tailwindcss @tailwindcss/vite ` 2. **Configure Vite:** Update your `vite.config.ts` file to include the Tailwind plugin: `[](#%5F%5Fcodelineno-7-1)+ import tailwindcss from '@tailwindcss/vite' [](#%5F%5Fcodelineno-7-2) [](#%5F%5Fcodelineno-7-3)export default defineConfig({ [](#%5F%5Fcodelineno-7-4) plugins: [ [](#%5F%5Fcodelineno-7-5)+ tailwindcss(), [](#%5F%5Fcodelineno-7-6) ], [](#%5F%5Fcodelineno-7-7)}) ` 3. **Import Tailwind CSS:** Add the following to your `src/theme/variables.css` file: `[](#%5F%5Fcodelineno-8-1)@import "tailwindcss"; ` 4. **Start the development server:** `[](#%5F%5Fcodelineno-9-1)npx ionic serve ` ### Vue[¶](#vue "Permanent link") For Ionic Vue projects, the installation process is similar to React: 1. **Install Tailwind CSS:** `[](#%5F%5Fcodelineno-10-1)npm install tailwindcss @tailwindcss/vite ` 2. **Configure Vite:** Update your `vite.config.ts` file to include the Tailwind plugin: `[](#%5F%5Fcodelineno-11-1)+ import tailwindcss from '@tailwindcss/vite' [](#%5F%5Fcodelineno-11-2) [](#%5F%5Fcodelineno-11-3)export default defineConfig({ [](#%5F%5Fcodelineno-11-4) plugins: [ [](#%5F%5Fcodelineno-11-5)+ tailwindcss(), [](#%5F%5Fcodelineno-11-6) ], [](#%5F%5Fcodelineno-11-7)}) ` 3. **Import Tailwind CSS:** Add the following to your `src/theme/variables.css` file: `[](#%5F%5Fcodelineno-12-1)@import "tailwindcss"; ` 4. **Start the development server:** `[](#%5F%5Fcodelineno-13-1)npx ionic serve ` ## Usage[¶](#usage "Permanent link") Once Tailwind CSS is installed and configured, you can start using utility classes in your Ionic application: `[](#%5F%5Fcodelineno-14-1) [](#%5F%5Fcodelineno-14-2) [](#%5F%5Fcodelineno-14-3) Home [](#%5F%5Fcodelineno-14-4) [](#%5F%5Fcodelineno-14-5) [](#%5F%5Fcodelineno-14-6) [](#%5F%5Fcodelineno-14-7) [](#%5F%5Fcodelineno-14-8)
[](#%5F%5Fcodelineno-14-9)

Welcome to Ionic

[](#%5F%5Fcodelineno-14-10)

This is a Tailwind CSS styled Ionic app.

[](#%5F%5Fcodelineno-14-11)
[](#%5F%5Fcodelineno-14-12) ` ## Tip: Platform-Specific Styles[¶](#tip-platform-specific-styles "Permanent link") You can use Tailwind's variants to apply platform-specific styles. For example, to apply different styles for Android and iOS, you can create custom variants in a global CSS file: `[](#%5F%5Fcodelineno-15-1)@custom-variant android (.md &); [](#%5F%5Fcodelineno-15-2)@custom-variant ios (.ios &); ` Then, you can use these variants in your HTML: `[](#%5F%5Fcodelineno-16-1)
[](#%5F%5Fcodelineno-16-2) This div will have a primary background color on iOS and a secondary background color on Android. [](#%5F%5Fcodelineno-16-3)
` If you are using Tailwind CSS v3 or earlier, check out the [Tailwind CSS Plugin for Ionic Framework](/blog/tailwind-css-plugin-for-ionic-framework/) guide to learn how to create a custom Tailwind CSS plugin. ## FAQ[¶](#faq "Permanent link") ### Why does Angular use a PostCSS plugin while React and Vue use a Vite plugin?[¶](#why-does-angular-use-a-postcss-plugin-while-react-and-vue-use-a-vite-plugin "Permanent link") Because of how each framework's Ionic starter builds its CSS pipeline. Ionic Angular projects process styles through PostCSS by default, so Tailwind integrates via `@tailwindcss/postcss` and a `.postcssrc.json` file. Ionic React and Vue starters build on Vite, so Tailwind integrates via `@tailwindcss/vite` registered directly in `vite.config.ts` instead — same end result, different build tool underneath. ### Do Tailwind utility classes conflict with Ionic's own component styling?[¶](#do-tailwind-utility-classes-conflict-with-ionics-own-component-styling "Permanent link") Not inherently — they operate at different levels. Ionic components (`ion-header`, `ion-content`, etc.) come with their own built-in styling, while Tailwind utility classes are typically applied to your own markup inside and around those components, as shown in the guide's example combining `` with a `
`. Conflicts are more likely if you try to override an Ionic component's internal styling directly with utility classes rather than Ionic's own CSS custom properties. ### Can I still create platform-specific `ios:`/`android:` variants if I'm on Tailwind v4?[¶](#can-i-still-create-platform-specific-iosandroid-variants-if-im-on-tailwind-v4 "Permanent link") Yes — the syntax just moved from a JS config file to CSS. Instead of registering the variant in `tailwind.config.js` with `addVariant` (the v3 approach), Tailwind v4 uses the `@custom-variant` at-rule directly in your CSS file, as shown in this guide's platform-specific styles tip. ### What's the actual difference between this guide and the "Tailwind CSS Plugin for Ionic Framework" post?[¶](#whats-the-actual-difference-between-this-guide-and-the-tailwind-css-plugin-for-ionic-framework-post "Permanent link") This guide covers installing Tailwind CSS 4.0 itself into a fresh Ionic project across three frameworks. The [Tailwind CSS Plugin for Ionic Framework](/blog/tailwind-css-plugin-for-ionic-framework/) post is narrower — it focuses specifically on the older Tailwind v3 plugin-based approach to declaring the `ios:`/`android:` platform variants, which is only relevant if you haven't upgraded to v4 yet. ## Conclusion[¶](#conclusion "Permanent link") You've successfully installed and configured Tailwind CSS version 4.0 with the Ionic Framework across Angular, React, and Vue projects. The combination of Ionic's component library and Tailwind's utility classes provides a powerful foundation for building modern, responsive applications. Remember to refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs) for a complete reference of available utility classes and features. 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). Happy coding with Ionic and Tailwind CSS! July 17, 2026 Back to top ```json { "@context": "https://schema.org", "@type": "BlogPosting", "headline": "Install Tailwind CSS with Ionic Framework", "description": "Learn how to integrate Tailwind CSS 4.0 with the Ionic Framework for Angular, React, and Vue projects. Build responsive, modern apps with ease using this guide.", "image": "https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png", "datePublished": "2025-07-09T00: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/install-tailwind-css-with-ionic-framework/", "url": "https://capawesome.io/blog/install-tailwind-css-with-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": "Install Tailwind CSS with Ionic Framework", "item": "https://capawesome.io/blog/install-tailwind-css-with-ionic-framework/" } ] } {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Why does Angular use a PostCSS plugin while React and Vue use a Vite plugin?", "acceptedAnswer": {"@type": "Answer", "text": "Because of how each framework's Ionic starter builds its CSS pipeline. Ionic Angular projects process styles through PostCSS by default, so Tailwind integrates via @tailwindcss/postcss and a.postcssrc.json file. Ionic React and Vue starters build on Vite, so Tailwind integrates via @tailwindcss/vite registered directly in vite.config.ts instead — same end result, different build tool underneath."}}, {"@type": "Question", "name": "Do Tailwind utility classes conflict with Ionic's own component styling?", "acceptedAnswer": {"@type": "Answer", "text": "Not inherently — they operate at different levels. Ionic components ( ion-header, ion-content, etc.) come with their own built-in styling, while Tailwind utility classes are typically applied to your own markup inside and around those components, as shown in the guide's example combining with a
. Conflicts are more likely if you try to override an Ionic component's internal styling directly with utility classes rather than Ionic's own CSS custom properties."}}, {"@type": "Question", "name": "Can I still create platform-specific ios: / android: variants if I'm on Tailwind v4?", "acceptedAnswer": {"@type": "Answer", "text": "Yes — the syntax just moved from a JS config file to CSS. Instead of registering the variant in tailwind.config.js with addVariant (the v3 approach), Tailwind v4 uses the @custom-variant at-rule directly in your CSS file, as shown in this guide's platform-specific styles tip."}}, {"@type": "Question", "name": "What's the actual difference between this guide and the \"Tailwind CSS Plugin for Ionic Framework\" post?", "acceptedAnswer": {"@type": "Answer", "text": "This guide covers installing Tailwind CSS 4.0 itself into a fresh Ionic project across three frameworks. The Tailwind CSS Plugin for Ionic Framework post is narrower — it focuses specifically on the older Tailwind v3 plugin-based approach to declaring the ios: / android: platform variants, which is only relevant if you haven't upgraded to v4 yet."}}], "url": "https://capawesome.io/blog/install-tailwind-css-with-ionic-framework/"} ```