DEV Community

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

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

Max Lynch on February 01, 2021

A very popular stack for building responsive web apps is Tailwind CSS and Next.js by Vercel. Tailwind, a utility-first CSS framework that replaces...
Collapse
 
erikmellum profile image
Erik Mellum • Edited

What are the limitations to adding SSR? I love the stack here, basically everything I want, but I want to include SSR. My understanding is that Ionic has references to window object that do not work in node. I've had this limitation in past projects and used JSDOM to spoof the window. Something like this:

//set up a dom for us to work with on the node backend
dom = new JSDOM('<!DOCTYPE html>', {
userAgent: "webkit",
});
//use jsdom to mimic some aspects of a web browser here in our node process
global.window = dom.window;
global.navigator = global.window.navigator;
global.document = global.window.document;

I'm likely to try this myself over the next day or two, but wondering if you have any words of wisdom or suggestions. I'm not certain until I try if the window object is the present limitation. Just throwing out some ideas.

Collapse
 
thewizardofwikacy profile image
The Wizard of Wikacy

very interested to know if you tried this. i am working on this now

Collapse
 
renatovanquish profile image
Renato T. Carvalho Jr.

Dear, Any suggestions for use with SSR?

Collapse
 
condinoaljoseph profile image
elpmid

Thanks for the helpful article, but have you tried using ionic input? it has some styling conflicts with tailwind base directives? I have to remove that directives but some of my tailwind classes / utilities are not working.

Collapse
 
tanzimibthesam profile image
Tanzim Ibthesam

How is it compared to React Native

Collapse
 
dotnetkow profile image
Matt Netkow

Check out our comparison article here. Ionic React and React Native are two great options for building apps.

However, Ionic/React + Capacitor is just normal React development. It’s the approach the majority of React web devs are familiar with. React Native is quite a bit different from React web dev, and will have a steeper learning curve and not be compatible with popular React libraries that web devs are used to.

Collapse
 
francocorreasosa profile image
Franco Correa

It is not... native... on the UI side. Pure web technologies with a wrapper (Capacitor) that acts as a bridge to system APIs.

Collapse
 
arnabxd profile image
Arnab Paryali • Edited

Can we expect a starter template in ionic start ?

Collapse
 
ttsoares profile image
Thomas TS

How about replace Typescript with JSDoc ?

There we can type just what we want and what make sense... with the bonus of an automatic generated documentation about the code !

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
witchoutname profile image
Tomáš

Ionic runs on vite. This guide shows, how to install Tailwind to a vite project.

Collapse
 
vhflat profile image
Vegard

I don't get it. Why would you use Nextjs when you cant use SSR or server routes?

Collapse
 
ajkr22 profile image
Ajay Kumar

Can we use Ionic Framework with Javascript,html,css project?