Install Tailwind CSS with Ionic Framework¶

Learn how to install and configure Tailwind CSS 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.

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.

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¶

Before you begin, ensure you have the following installed on your system:

Node.js (version 16 or higher) and npm
Ionic CLI installed globally

You can install the Ionic CLI globally using:

npm install -g @ionic/cli

Next, create a new Ionic project for your chosen framework:

npx ionic start my-ionic-app blank --type=<angular|react|vue>
cd my-ionic-app

Installation¶

Angular¶

To install Tailwind CSS with your Ionic Angular project, follow these steps:

Install Tailwind CSS and dependencies:

npm install tailwindcss @tailwindcss/postcss postcss

Configure PostCSS:
Create a .postcssrc.json file in your project root:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Import Tailwind in your styles:
Add the following to your src/global.scss file:
```
@import "tailwindcss";
```
Start the development server:
```
npx ionic serve
```

React¶

For Ionic React projects, the installation process uses Vite:

Install Tailwind CSS:

npm install tailwindcss @tailwindcss/vite

Configure Vite:
Update your vite.config.ts file to include the Tailwind plugin:

+ import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
+    tailwindcss(),
  ],
})

Import Tailwind CSS:
Add the following to your src/theme/variables.css file:
```
@import "tailwindcss";
```
Start the development server:
```
npx ionic serve
```

Vue¶

For Ionic Vue projects, the installation process is similar to React:

Install Tailwind CSS:

npm install tailwindcss @tailwindcss/vite

Configure Vite:
Update your vite.config.ts file to include the Tailwind plugin:

+ import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
+    tailwindcss(),
  ],
})

Import Tailwind CSS:
Add the following to your src/theme/variables.css file:
```
@import "tailwindcss";
```
Start the development server:
```
npx ionic serve
```

Usage¶

Once Tailwind CSS is installed and configured, you can start using utility classes in your Ionic application:

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="p-4">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to Ionic</h1>
    <p class="text-gray-600 mb-6">This is a Tailwind CSS styled Ionic app.</p>
  </div>
</ion-content>

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:

@custom-variant android (.md &);
@custom-variant ios (.ios &);

Then, you can use these variants in your HTML:

<div class="ios:bg-primary android:bg-secondary">
  This div will have a primary background color on iOS and a secondary background color on Android.
</div>

If you are using Tailwind CSS v3 or earlier, check out the Tailwind CSS Plugin for Ionic Framework guide to learn how to create a custom Tailwind CSS plugin.

Conclusion¶

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 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 and follow us on X (formerly Twitter).

Happy coding with Ionic and Tailwind CSS!