Using TailwindCSS in an Ionic React Project

TailwindCSS is a game changer in the CSS world, allowing developers to rapidly build websites leveraging utility-first practices and intuitive classes. Ionic gives you the freedom to create cross-platform apps for mobile and the web using the stack you prefer. In this tutorial, we will be using React!

👋🏼 Follow me on Twitter for more content like this!

Why Ionic?

There are many reasons you may choose Ionic over other frameworks like React Native (RN), and maybe I’ll write a bit about that in the future. In this case, we want to use TailwindCSS for styling, which is absolutely possible thanks to Ionic’s ability to write CSS. In RN, however, this is not possible due to the constraints that exist that don’t exist on the web. Constraints like no breakpoints, style classes, and more. Libraries exist to allow you to use TailwindCSS in RN but the experience just isn’t the same.

Getting Started

If you haven’t already, run the following script to install the ionic cli.

npm install -g @ionic/cli

Now you can create your project which is titled “tailwindIonicReact” and specify React as the framework of choice.

ionic start tailwindIonicReact --type=react

Lastly, change directory into your project and open in Visual Studio Code or your editor of choice.

cd tailwindIonicReact

Installing TailwindCSS

Create React App does not support PostCSS 8 at this time, so we will install a compatibility build instead. Run the following script to install Tailwind, PostCSS 7, and autoprefixer.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 

Additionally, to be able to configure tailwind, we need to install CRACO.

npm install @craco/craco

Configuring TailwindCSS

Let’s start by creating our tailwind.config.js file:

npx tailwindcss-cli@latest init

This generates a minimal TailwindCSS configuration file we can modify to our needs. It should look something like this (I added JIT mode and purge files):

// tailwind.config.js
module.exports = {
  mode: 'jit', // Optionally use just in time engine
  purge: ['./src/**/*.{js,jsx,ts,tsx,css}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Including Tailwind in our CSS

Create a new file tailwind.css in the ./src/theme file of your project. This is where we will include Tailwind’s base, components, and utilities styles.

/* ./src/theme/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Now, in your ./src/App.tsx file, you can import your tailwind.css file below where you import the variables.css file.

// ./src/App.tsx
/* Theme variables */
import './theme/variables.css';
/* Tailwind styles */
import './theme/tailwind.css';

Configuring CRACO

In order to configure TailwindCSS, we need to create a craco.config.js file in the root of our project:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Modify Serve and Build Scripts

Now we need to modify ionic’s serve and build scripts to use CRACO instead of react-scripts. You can do this by targeting two specific scripts:

...
"scripts": {
    ...,
    "start": "TAILWIND_MODE=watch craco start",
    "build": "craco build",
    "ionic:serve": "TAILWIND_MODE=watch craco start",
    "ionic:build": "craco build",
    ...,
},
...

Now anytime you run your local development server using npm run start or ionic:serve, or you build your project using npm run build or ionic build, your TailwindCSS styles will be compiled and used. This also includes live reload scripts for iOS and Android!

One other item to note, I’ve had to include TAILWIND_MODE=watch to both serve scripts in order for TailwindCSS classes to be correctly linted as I write them.

Testing It Out

Let’s test this out! Open your ./src/pages/Home.tsx file and replace the Home component with the following content:

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>TailwindCSS</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen className="relative">
        <div className="text-center absolute left-0 right-0 top-1/2 transform -translate-y-1/2 flex justify-center items-center">
          <div className="border border-gray-100 rounded-xl shadow-2xl p-8 bg-gradient-to-r from-green-400 via-blue-900 to-blue-400 text-white max-w-lg">
            <h1 className="text-2xl font-bold">Using TailwindCSS in Ionic with React</h1>
            <p className="mt-4">This is an example of how you can use <span className="font-bold">TailwindCSS</span> in an <span className="font-bold">Ionic</span> application using <span className="font-bold">React</span> framework.</p>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

Now run your project:

ionic serve

Your browser should automatically open to localhost:8100/home and you should see the following result:

TailwindCSS Example using Ionic with React

And that’s it! You’ve successfully added TailwindCSS to your Ionic React project.

Final Thoughts

Thanks for taking the time to read this, and I hope it has been helpful for you and your projects! Post your questions in the comments and I’ll get back to you! Thanks for reading!

You can find me on GitHub, Twitter, my website, and LinkedIn!