--- title: 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. date: created: 2025-07-09 updated: 2026-07-17 authors: - robingenz categories: - Guides - Ionic Framework faq: true --- # Install Tailwind CSS with Ionic Framework Learn how to install and configure [Tailwind CSS](https://tailwindcss.com/){:target="_blank"} 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.
Build and deploy your Capacitor app with Capawesome Cloud
## Introduction 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. This guide will walk you through the installation process for Angular, React, and Vue projects using the Ionic Framework. ## Prerequisites Before you begin, ensure you have the following installed on your system: - [Node.js](https://nodejs.org/){:target="_blank"} (version 16 or higher) and [npm](https://www.npmjs.com/){:target="_blank"} - [Ionic CLI](https://ionicframework.com/docs/cli){:target="_blank"} installed globally You can install the Ionic CLI globally using: ```bash npm install -g @ionic/cli ``` Next, create a new Ionic project for your chosen framework: ```bash npx ionic start my-ionic-app blank --type= cd my-ionic-app ``` ## Installation ### Angular To install Tailwind CSS with your Ionic Angular project, follow these steps: 1. **Install Tailwind CSS and dependencies:** ```bash npm install tailwindcss @tailwindcss/postcss postcss ``` 1. **Configure PostCSS:** Create a `.postcssrc.json` file in your project root: ```json { "plugins": { "@tailwindcss/postcss": {} } } ``` 1. **Import Tailwind in your styles:** Add the following to your `src/global.scss` file: ```css @import "tailwindcss"; ``` 1. **Start the development server:** ```bash npx ionic serve ``` ### React For Ionic React projects, the installation process uses Vite: 1. **Install Tailwind CSS:** ```bash npm install tailwindcss @tailwindcss/vite ``` 1. **Configure Vite:** Update your `vite.config.ts` file to include the Tailwind plugin: ```diff + import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ + tailwindcss(), ], }) ``` 1. **Import Tailwind CSS:** Add the following to your `src/theme/variables.css` file: ```css @import "tailwindcss"; ``` 1. **Start the development server:** ```bash npx ionic serve ``` ### Vue For Ionic Vue projects, the installation process is similar to React: 1. **Install Tailwind CSS:** ```bash npm install tailwindcss @tailwindcss/vite ``` 1. **Configure Vite:** Update your `vite.config.ts` file to include the Tailwind plugin: ```diff + import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ + tailwindcss(), ], }) ``` 1. **Import Tailwind CSS:** Add the following to your `src/theme/variables.css` file: ```css @import "tailwindcss"; ``` 4. **Start the development server:** ```bash npx ionic serve ``` ## Usage Once Tailwind CSS is installed and configured, you can start using utility classes in your Ionic application: ```html Home

Welcome to Ionic

This is a Tailwind CSS styled Ionic app.

 ``` ## Tip: Platform-Specific Styles 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: ```css @custom-variant android (.md &); @custom-variant ios (.ios &); ``` Then, you can use these variants in your HTML: ```html
This div will have a primary background color on iOS and a secondary background color on Android.
``` If you are using Tailwind CSS v3 or earlier, check out the [Tailwind CSS Plugin for Ionic Framework](./tailwind-css-plugin-for-ionic-framework.md) guide to learn how to create a custom Tailwind CSS plugin. ## FAQ ### Why does Angular use a PostCSS plugin while React and Vue use a Vite plugin? 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. The result is the same; only the build tool differs. ### Do Tailwind utility classes conflict with Ionic's own component styling? 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? Yes — the syntax 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? This guide covers installing Tailwind CSS 4.0 itself into a fresh Ionic project across three frameworks. The [Tailwind CSS Plugin for Ionic Framework](./tailwind-css-plugin-for-ionic-framework.md) 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 Pick the integration that matches your build tool: `@tailwindcss/postcss` with a `.postcssrc.json` file for Ionic Angular, `@tailwindcss/vite` in `vite.config.ts` for Ionic React and Vue. Apply utility classes to your own markup, and style Ionic components through their CSS custom properties instead of overriding their internal styling with utility classes. If you are still on Tailwind v3 or earlier, [Tailwind CSS Plugin for Ionic Framework](./tailwind-css-plugin-for-ionic-framework.md) covers the plugin-based approach to the same platform variants. The [Tailwind CSS documentation](https://tailwindcss.com/docs){:target="_blank"} lists every available utility class. If a utility class does not apply the way you expect, ask in the [Capawesome Discord server](https://discord.gg/VCXxSVjefW){:target="_blank"}. To stay updated with the latest updates, features, and news about the Capawesome, Capacitor, and Ionic ecosystem, subscribe to the [Capawesome newsletter](/newsletter/){:target="_blank"} and follow us on [X (formerly Twitter)](https://x.com/capawesomeio){:target="_blank"}.