Using TailwindCSS in an Ionic React Project

Why Ionic?

Getting Started

npm install -g @ionic/cli
ionic start tailwindIonicReact --type=react
cd tailwindIonicReact

Installing TailwindCSS

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

Configuring TailwindCSS

npx tailwindcss-cli@latest init
// 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

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

Configuring CRACO

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

Modify Serve and Build Scripts

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

Testing It Out

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>
);
};
ionic serve
TailwindCSS Example using Ionic with React

Final Thoughts

--

--

--

Full-stack software engineer specializing in web and mobile development. Always learning new things. “There is no growth in the comfort zone…”

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Absolute understanding of basic of Node.js: Guide

RxJS in-depth: Github repo ‘utils’ directory review (part 1)

Don’t start with React

READ/DOWNLOAD#$ The Majesty of Vue.js 2 FULL BOOK

Understanding The React Source Code VI

javascript slice subString substr

Lazy-Loading Feature Modules In Angular

A nitty gritty details about Node.js’s modules & packages

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jacob Neterer

Jacob Neterer

Full-stack software engineer specializing in web and mobile development. Always learning new things. “There is no growth in the comfort zone…”

More from Medium

My Favorite 3 React Animation Libraries

Step-by-step: How to Internationalize your NextJS App with Next-Translate

How to self-host fonts in NextJS

How To Automatically Get Props Types in Next.js and TypeScript