Tailwind Mobile & Ionic

Let's see how to use Tailwind Mobile React components with Ionic React.

Create Ionic Project

First, create an Ionic React project.

Install Tailwind CSS

If Ionic React project was generated with Ionic CLI, it actually creates a Create React App project.

So, to install Tailwind CSS, we can follow official Tailwind CSS with Create React App Guide

Tailwind CSS Styles

Create a src/App.css file with the following content to include Tailwind CSS:

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

Install Tailwind Mobile

Now, we can install Tailwind Mobile:

npm i tailwind-mobile

And in your tailwind.config.js file we should extend config with Tailwind Mobile's config:

const tailwindMobile = require('tailwind-mobile/config');

module.exports = tailwindMobile({
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
});

TailwindMobileProvider

Now we need to setup TailwindMobileProvider so we can set some global parameters (like theme).

We need to wrap main Ionic's IonApp component with TailwindMobileProvider in the src/App.tsx:

import React from 'react';
import { TailwindMobileProvider } from 'tailwind-mobile/react';
import { IonApp /* ... */ } from '@ionic/react';

const App: React.FC = () => (
  // Wrap IonApp with TailwindMobileProvider with theme="parent"
  <TailwindMobileProvider theme="parent">
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  </TailwindMobileProvider>
);

Usage

To keep Ionic router work correctly we need to use Router-related components from Ionic: IonApp, IonReactRouter, IonPage, IonHeader, IonFooter, IonToolbar.

The rest of components (if there is a Tailwind Mobile alternative) can be taken from Tailwind Mobile (tailwind-mobile/react)

Example Page

Now when everything is set up, we can use Tailwind Mobile React components in Ionic page components.

For example, let's open src/pages/Home.tsx and change it to the following:

import {
  IonContent,
  IonHeader,
  IonFooter,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import {
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
  Link,
} from 'tailwind-mobile/react';

const Home: React.FC = () => {
  return (
    // Use IonPage, IonHeader, IonFooter & IonToolbar from Ionic
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>My App</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonFooter>
        <IonToolbar>
          <Link slot="start" toolbar>
            Link 1
          </Link>
          <Link slot="end" toolbar>
            Link 2
          </Link>
        </IonToolbar>
      </IonFooter>

      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">My App</IonTitle>
          </IonToolbar>
        </IonHeader>

        {/* In page content we can use Tailwind Mobile components  */}
        <Block strong>
          <p>
            Here is your Ionic & Tailwind Mobile app. Let's see what we have
            here.
          </p>
        </Block>
        <BlockTitle>Navigation</BlockTitle>
        <List>
          <ListItem href="/about/" title="About" />
          <ListItem href="/form/" title="Form" />
        </List>

        <Block strong className="flex space-x-4">
          <Button>Button 1</Button>
          <Button>Button 2</Button>
        </Block>
      </IonContent>
    </IonPage>
  );
};

export default Home;

As a result we should see the following page:

tailwind-mobile-ionic

Color Theme

Ionic and Tailwind Mobile use different sources for main theme color. While Ionic's theme color is configured via CSS custom properties, Tailwind Mobile theme should be set in tailwind.config.js.

ColorIonic CSS VarTailwind Mobile Prop
primary--ion-color-primaryprimary
primary dark--ion-color-primary-shadeprimary-dark
primary light--ion-color-primary-tintprimary-light

Let's say our theme color is #ff6b22, we need to set the following:

In App.css (to configure Ionic theme color):

:root {
  --ion-color-primary: #ff6b22;
  --ion-color-primary-rgb: 255, 107, 34;
  --ion-color-primary-shade: #f85200;
  --ion-color-primary-tint: #ff864b;
}

And in tailwind.config.js (to configure Tailwind Mobile theme color):

const tailwindMobile = require('tailwind-mobile/config');

module.exports = tailwindMobile({
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  // extend primary color
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#ff864b',
          DEFAULT: '#ff6b22',
          dark: '#f85200',
        },
      },
    },
  },
});
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.