Integration of Ionic React Tailwind CSS

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.

Any help is much appreciated.

1 Like

Hi, did you get anywhere with this, I’d like to do the same but not sure how to configure it at the moment?

Not really, I am still looking into ways of doing it

This is the closest thing I could find, if this is any help to you

Thanks, I’ve seen that and it looks like it is the solution at the moment. I don’t see any reason not to use that instead of ionic directly. It does everything I need to to for creating apps with ionic, tailwind and capacitor.

Same stuck on this - I’d like to use Tailwind CSS without NextJS

I cannot give you React specifics, but I followed this Angular post to add it to my Vue Ionic app along with Tailwind’s installation documentation.

main.ts

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css'

import 'tailwindcss/base.css'

/* Basic CSS for apps built with Ionic */
// import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'

import 'tailwindcss/components.css'

/* Optional CSS utils that can be commented out */
// import '@ionic/vue/css/padding.css';
// import '@ionic/vue/css/float-elements.css';
// import '@ionic/vue/css/text-alignment.css';
// import '@ionic/vue/css/text-transformation.css';
// import '@ionic/vue/css/flex-utils.css';
// import '@ionic/vue/css/display.css';

import 'tailwindcss/utilities.css'

/* Theme variables */
import './theme/variables.css'
import './theme/styles.css'

tailwind.config.js

module.exports = {
    purge: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.ts',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        screens: {
            'sm': '576px',
            'md': '768px',
            'lg': '992px',
            'xl': '1200px',
        },
        colors: {
            primary: {
                default: 'var(--ion-color-primary)',
                contrast: 'var(--ion-color-primary-contrast)',
                shade: 'var(--ion-color-primary-shade)',
                tint: 'var(--ion-color-primary-tint)',
            },
            secondary: {
                default: 'var(--ion-color-secondary)',
                contrast: 'var(--ion-color-secondary-contrast)',
                shade: 'var(--ion-color-secondary-shade)',
                tint: 'var(--ion-color-secondary-tint)',
            },
            tertiary: {
                default: 'var(--ion-color-tertiary)',
                contrast: 'var(--ion-color-tertiary-contrast)',
                shade: 'var(--ion-color-tertiary-shade)',
                tint: 'var(--ion-color-tertiary-tint)',
            },
            light: {
                default: 'var(--ion-color-light)',
                contrast: 'var(--ion-color-light-contrast)',
                shade: 'var(--ion-color-light-shade)',
                tint: 'var(--ion-color-light-tint)',
            },
            medium: {
                default: 'var(--ion-color-medium)',
                contrast: 'var(--ion-color-medium-contrast)',
                shade: 'var(--ion-color-medium-shade)',
                tint: 'var(--ion-color-medium-tint)',
            },
            dark: {
                default: 'var(--ion-color-dark)',
                contrast: 'var(--ion-color-dark-contrast)',
                shade: 'var(--ion-color-dark-shade)',
                tint: 'var(--ion-color-dark-tint)',
            },
            success: {
                default: 'var(--ion-color-success)',
                contrast: 'var(--ion-color-success-contrast)',
                shade: 'var(--ion-color-success-shade)',
                tint: 'var(--ion-color-success-tint)',
            },
            warning: {
                default: 'var(--ion-color-warning)',
                contrast: 'var(--ion-color-warning-contrast)',
                shade: 'var(--ion-color-warning-shade)',
                tint: 'var(--ion-color-warning-tint)',
            },
            danger: {
                default: 'var(--ion-color-danger)',
                contrast: 'var(--ion-color-danger-contrast)',
                shade: 'var(--ion-color-danger-shade)',
                tint: 'var(--ion-color-danger-tint)',
            },
            step: {
                '50': 'var(--ion-color-step-50)',
                '100': 'var(--ion-color-step-100)',
                '150': 'var(--ion-color-step-150)',
                '200': 'var(--ion-color-step-200)',
                '250': 'var(--ion-color-step-250)',
                '300': 'var(--ion-color-step-300)',
                '350': 'var(--ion-color-step-350)',
                '400': 'var(--ion-color-step-400)',
                '450': 'var(--ion-color-step-450)',
                '500': 'var(--ion-color-step-500)',
                '550': 'var(--ion-color-step-550)',
                '600': 'var(--ion-color-step-600)',
                '650': 'var(--ion-color-step-650)',
                '700': 'var(--ion-color-step-700)',
                '750': 'var(--ion-color-step-750)',
                '800': 'var(--ion-color-step-800)',
                '850': 'var(--ion-color-step-850)',
                '900': 'var(--ion-color-step-900)',
                '950': 'var(--ion-color-step-950)',
            },
        }
    }
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}
1 Like

Forgot to mention, any where I need to set a Ionic component CSS Custom Property within my Vue component, I do the following:

<style scoped>
ion-item {
    --background: theme('colors.light.tint');
}
</style>

This allows me to not have to hardcode colors and such. Everything is tied back to my general theme. theme() is a Tailwind function - see here.

1 Like

I have managed to do this now. Follow the instructions for using Tailwindcss with create-react-app.

Then you’re basically using npm and npx scripts to build etc, e.g:

npm run start - serve your app.
npm run build - build your app
npx cap add android - set up a platform
npx cap copy - copy build over to the platforms

This is working fine for me. I’m not sure what the ionic cli is giving you doing it this way, or if this is any different from starting with CRA in the first place. However, you do get the scaffolding that ionic CLI provides.