Is it possible to add TailwindCSS into Ionic React?

Question

I am looking into ways of how I can integrate Tailwind CSS into ionic react application, I have tried this but fell into a dead end, I am aware of the the Next.JS and Tailwind CSS starter created by one of the ionic experts but also inspecting that even I fell into a dead end.

I set it up similar to this. https://codingthesmartway.com/using-tailwind-css-with-react/ — b_d_m_p, Feb 13 '21 at 09:25

Michael Tran · Answer 1 · 2021-02-27T14:50:51.293

1

Ionic Framework React internally uses Create React App (CRA).

Thus following Tailwindcss CRA setup work as you would expect.

Just note that you do not need @tailwind base since Ionic out of the box already import normalize.css for us.

edited Feb 27 '21 at 14:50

answered Feb 27 '21 at 14:24

Michael Tran

11
3

1

How is this going to work with 'ionic serve' when that is not in the package.json scripts that are being replaced with craco? – Bryan Feb 27 '21 at 19:29

score 0 · Answer 2 · answered Jun 12 '23 at 17:02

0

Just as Michael Tran pointed out ionic uses CRA to bootstrap a new react project however, there are some other steps to follow for it to work.

I wrote an article on how this can be achieved you can read my article here

answered Jun 12 '23 at 17:02

ajimae

89
4

score 0 · Answer 3 · answered Aug 31 '23 at 18:15

Yes we can add TailwindCSS to Ionic React by installing Tailwind CSS with Vite.

step 1: Run this command in terminal

npm install -D tailwindcss postcss autoprefixer

Step 2: Run this command in terminal

npx tailwindcss init -p

Step 3: Configure your template paths, Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

step 4: Add the Tailwind directives to your CSS,

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

Step 5: Start your build process

Run your build process with :

ionic serve

finally Start using Tailwind in your project,

Start using Tailwind’s utility classes to style your content.

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Reference link Install Tailwind CSS with Vite using React

Is it possible to add TailwindCSS into Ionic React?

3 Answers3