How to add TailwindCSS to React Ionic App

Adding Tailwind CSS in 4 steps

Internet says you just need to follow the official tutorial. It's ALMOST true, except if you do only this, it won't work.

You need to follow those 4 steps:

1. Indeed follow the official tutorial.

2. Delete all ionic CSS files except the core from App.tsx

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

3. Add the tailwind.css file that contains:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import this file in App.tsx

import './theme/tailwind.css';

Done !