Build Mobile Apps with Tailwind CSS, Next.js, Ionic Framework, and Capacitor

On the Capacitor blog I just published my Next.js + Tailwind + Ionic Framework + Capacitor starter, and walked through how each part of the stack fits together and why you might want to consider using this stack for building mobile apps.

This is the comment thread for that blog post.

Read the blog ->

1 Like

Hi Max,
Thank you for this. Really cool and inspiring to see nice goodies combined.

Just out of curiosity - also after digging in the code - have you aligned the color Ionic color scheme as in variables.scss towards the tailwind color schemes, the other way around or kept them the way they are out of the box?

Especially when mixing both a bit more in pages I would expect colors needing to be consistent.

Or did I miss something (not a Next.js/Tailwind user)?

Thx and regards

Tom

I didn’t touch those but yes I’d probably go and sync the colors in variables.scss with the default tailwind ones

1 Like

Hi Max, thank you for the great work combining these technologies into a stack.
I have started using Next + Tailwind lately. I was wondering since Next’s server-side rendering and routing is not used in this project, in the case of building a mobile app only, what are the advantages of using Next compared to Ionic React?

best regards,
Eka

That’s a good question. The advantage is that next.js is setup to work with Tailwind whreas ionic framework is not. There have been several questions in these forums asking how to set up tailwind with ionic-react but nobody has answered. It is notably quiet from the Ionic team.

Tailwind with work with create react app, there are instructions on the tailwind site, but it involves install craco and I don’t have the understanding to get it to work with Ionic.

It would probably be easy enough to do if you eject but I don’t know if you can eject - there is nothing in the ionic docs and I haven’t tried it as yet - but then you’re left with all the updating yourself from that point on.

This all leads me to go with next.js stack from now on. It would be great to hear from the ionic team about this though.

Hey, @max The only question in my mind, How to get benefits from the Nextjs Routing, i18n, and fetching data ways like (SSR, SSG…) at least for PWA, is that possible? or Next.js just a wrapper to use Tailwindcss?

3 Likes

Hey Nurdin, good question that did not get an answer! What is the recommended package for this setup for I18N?