Skip to content

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:

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:

  1. Install Tailwind CSS and dependencies:
    npm install tailwindcss @tailwindcss/postcss postcss
    
  2. Configure PostCSS:
    Create a .postcssrc.json file in your project root:
    {
      "plugins": {
        "@tailwindcss/postcss": {}
      }
    }
    
  3. Import Tailwind in your styles:
    Add the following to your src/global.scss file:
    @import "tailwindcss";
    
  4. Start the development server:
    npx ionic serve
    

React

For Ionic React projects, the installation process uses Vite:

  1. Install Tailwind CSS:
    npm install tailwindcss @tailwindcss/vite
    
  2. Configure Vite:
    Update your vite.config.ts file to include the Tailwind plugin:
    + import tailwindcss from '@tailwindcss/vite'
    
    export default defineConfig({
      plugins: [
    +    tailwindcss(),
      ],
    })
    
  3. Import Tailwind CSS:
    Add the following to your src/theme/variables.css file:
    @import "tailwindcss";
    
  4. Start the development server:
    npx ionic serve
    

Vue

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

  1. Install Tailwind CSS:
    npm install tailwindcss @tailwindcss/vite
    
  2. Configure Vite:
    Update your vite.config.ts file to include the Tailwind plugin:
    + import tailwindcss from '@tailwindcss/vite'
    
    export default defineConfig({
      plugins: [
    +    tailwindcss(),
      ],
    })
    
  3. Import Tailwind CSS:
    Add the following to your src/theme/variables.css file:
    @import "tailwindcss";
    
  4. 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!