--- 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 Vault** plugin β€” store secrets behind biometrics or a device passcode.](/blog/announcing-the-capacitor-vault-plugin/) * [ 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/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ 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/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ 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 or Yarn ](/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) * [ 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](../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](/) ## 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. ## 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! May 7, 2026 Back to top