Skip to content

Latest commit

 

History

History
42 lines (29 loc) · 888 Bytes

2024-02-29-how-to-add-tailwind-css-to-ionic-react-project.mdx

File metadata and controls

42 lines (29 loc) · 888 Bytes
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.
Ionic
/static/images/blog/2023-12-09/ionic-and-tailwindcss.jpg
false

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 !