Integrating TailwindCSS and Ionic-React application.

For the past couple of days I challenged myself to build a simple application using ionic. I have always liked the fact that I can use my React knowledge to build a full featured mobile application using capacitor — which is a framework that acts as a bridge between the native APIs and ionic framework.

After starting out, I got frustrated with the native styling that ships with ionic which is poorly documented and difficult to follow and also, it’s somewhat very limiting in what you can achieve, hence I set out to look for an alternative.

The first place I looked was how to use TailwindCSS with ionic framework. This was a very daunting task, I looked everywhere on how this can be achieved but couldn’t find anything substantial. However, I saw an article by Jacob Neterer and Ariel Hernández Musa that uses @craco/craco with PostCSS, however this article is outdated, I couldn’t get it to work.

However, from the article I learnt that ionic uses CRA under the hood to bootstrap a new ionic-react project and also tailwindCSS exposes style declarations to PostCSS. I know my search was over as I can combine these technologies to create a full working ionic-react app with tailwindCSS integration. I set out to give my hypothesis a shot, and it worked like charm.

To integrate tailwindCSS into an ionic-react/capacitor application we need to install some dependencies just like every other javascript project 😀.

First we will start by setting up a blank ionic app that uses capacitor.

npm install -g @ionic/cli

Then we can create a new blank ionic-react project using capacitor.

ionic start ionic-react-tailwind blank --type=react --capacitor

The above command might take some time depending on your machine and internet connection.

Next we will add a target platform in our project, this platform can be either ios or android in this case I will be using ios, feel free to use android if that is your preferred platform.

ionic capacitor add ios

Next let’s run the ionic live server to monitor our app changes in real time.

ionic capacitor run ios -l --external

Your app should look similar to the screenshot below.

ionic-react blank template

Now we have setup our ionic app, we can move on to add tailwindCSS to the project. First we need to install tailwindcss, autoprefixer and postcss-cli

npm install --save-dev tailwindcss autoprefixer postcss-cli

• postcss-cli — PostCSS is a (cli) tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
• autoprefixer — This is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. See more about autoprefixer here.

Next step is to initialise tailwindcss using the tailwind cli command below

npx tailwind init tailwind.config.js

This will create a new tailwind config file called tailwind.config.js within the project root directory.

Add the following config into the tailwind.config.js file, feel free to adapt this config based on your project structure.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,jsx,ts,tsx,css}'],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, we create a file called postcss.config.js (or postcss.config.cjs if your package.json has a "type": "module" entry) within the root of our project directory and add the following configurations into the file.

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

We are almost there, the next step is to create a tailwind.css file anywhere within the project directory and add the following css tailwind declarations in the tailwind.css file, I did place mine within the project root.

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

/** other custom global styles can go here */

We are almost done, we have just two remaining steps to complete the integration.

First we create two npm scripts in our package.json file to build our tailwind.css style into a location we can link in our root component.

Add these scripts to your package.json file script section.

// package.json
{
  ...
  "scripts": {
    ...
    "build:css": "postcss tailwind.css -o src/theme/tailwind.css",
    "watch:css": "postcss tailwind.css -o src/theme/tailwind.css -w",
    "start:dev": "yarn watch:css & ionic capacitor run ios -l --external"
    ...
}

Explanation:

• build:css — uses the postcss cli to build our tailwind.css file into the theme directory, again this can be any path within your project directory.
• watch:css — same as the build:css just that this builds and keep watch on changes to the built file.
• start:dev — this command first runs the watch:css script in the background, build and then starts our ionic-react application.

Note: The & tells the terminal not to wait for the first command to exit the first command before running the second.

The final piece in this integration is to link the path to the built tailwind.css style file to our root component. To do this, import the line below into our App.tsx file or whatever your root component is.

// App.tsx

/* Tailwind styles */
import './theme/tailwind.css';

To test our setup and integration, we can use the snippet containing some below tailwind styles to test the functionality. Replace the code in the Home.tsx file with the snippet below.

...
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>
  );
};
...

Execute the start:dev script to see the updated changes along with the compiled tailwind.css file.

The code snippet above should show the design below indicating that the tailwind classes are in fact working.

Using TailwindCSS in Ionic with React [landscape]

The full code for this integration can be found here on github.

Conclusion

We have successfully integrated TailwindCSS into an Ionic-React project, now we can utilise the full power of TailwindCSS in our ionic application.

Feel free to send in your comments and questions.