Published on

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';
  1. Add the tailwind.css file that contains:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Import this file in App.tsx
import './theme/tailwind.css';

Done !