title | date | summary | tags | images | draft | ||
---|---|---|---|---|---|---|---|
How to add TailwindCSS to React Ionic App |
2024-02-29 |
Add beautiful styles to you Ionic app in React. |
|
|
false |
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:
-
Indeed follow the official tutorial.
-
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';
- Add the tailwind.css file that contains:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Import this file in App.tsx
import './theme/tailwind.css';
Done !