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.
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
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?
Hey Nurdin, good question that did not get an answer! What is the recommended package for this setup for I18N?
Hey @max .
Great work on this starter. I have been playing around with my own clone of the repo locally and seeing if I could update it to the latest version of Ionic (v6) but have been unable to do so. Was wondering if you had any plans to updating this starter to work with Ionic 6.
To give some details, the initial issue was getting the error:
SyntaxError: Unexpected token 'export'
node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
To fix this, I used the package next-transpile-modules which did clear that up but then I ran into issues specifically with the IonCol component attempting to access the global window object when the setupIonicReact function is called.
I have tried the usual SSR fixes, such as only calling the init function when the window object is not undefined, only calling the setupIonicReact function inside a useEffect, as well as only loading the app within a next/dynamic call with ssr: false (which was already done in this starter) but I receive the same error each time.
Just curious if there are any plans to update this starter to be compatible with Ionic v6 or if I wished to build off of it that sticking with Ionic 5 would be the best option? Or perhaps if there is a fix that I have missed altogether?
Thanks for any assistance.
Thanks @max for this detailed article. This is very innovative approach towards merging Tailwind with Ionic. Will we be able to generate web application using same code ? Is it a good Idea to do so ? Thanks in advance.
@max While executing - npx cap sync, I am getting this error.
[error] The web assets directory (./out) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
How to resolve this ?