How to Install Tailwind CSS (v4) in an Ionic project
At our company, we use the TALL stack (Tailwind, Alpine.js, Laravel, Livewire) as our default tech stack. However, when building mobile apps, we prefer using Ionic for its flexibility and ease of use. But Ionic doesn't natively support Tailwind, and there is no official installation guide. So we’ve developed our own method to integrate it smoothly. In this article, I’ll walk you through the steps to install Tailwind CSS v4 into an Ionic app.
Here's a step-by-step guide on how to install Tailwind CSS v4 in your Ionic project:
1. Install Tailwind
First, you need to install Tailwind CSS to use it within your Ionic project.Open your terminal and run the following command:
Terminal.png 217.85 KB2. Configure vite.config.ts
Next, you'll need to configure Vite to use the Tailwind. Open your vite.config.ts file and add the following configuration:
vite.config.ts.png 670.47 KBThis will enable Tailwind CSS to work with Vite in your Ionic project.
3. Add Tailwind Directives in theme/variables.css
Now, create or update your theme/variables.css to include the Tailwind CSS styles. This will allow you to customize and use Tailwind’s utility classes throughout your Ionic app.In your variables.css, add the following:
theme_variables.css.png 363.41 KBYou have to disable preflight to avoid breaking Ionic styles.
That is all!
That's it! You’ve successfully integrated Tailwind CSS v4 with your Ionic project. Now, you can use Tailwind’s utility classes throughout your app while retaining Ionic's unique styles!
example.vue.png 596.78 KB