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:
Next, create a new Ionic project for your chosen framework:
Installation¶
Angular¶
To install Tailwind CSS with your Ionic Angular project, follow these steps:
- Install Tailwind CSS and dependencies:
- Configure PostCSS:
Create a.postcssrc.json
file in your project root: - Import Tailwind in your styles:
Add the following to yoursrc/global.scss
file: - Start the development server:
React¶
For Ionic React projects, the installation process uses Vite:
- Install Tailwind CSS:
- Configure Vite:
Update yourvite.config.ts
file to include the Tailwind plugin: - Import Tailwind CSS:
Add the following to yoursrc/theme/variables.css
file: - Start the development server:
Vue¶
For Ionic Vue projects, the installation process is similar to React:
- Install Tailwind CSS:
- Configure Vite:
Update yourvite.config.ts
file to include the Tailwind plugin: - Import Tailwind CSS:
Add the following to yoursrc/theme/variables.css
file: - Start the development server:
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:
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!