React with tailwindcss for node-red?

Share Your Nodes
1

Hey all,

I'm working on something different from the usual dashboard kit. Component-first UI package, react + tailwindcss. You write your own components, style them with tailwind, reuse across flows.

You build what you want from scratch, all inside the Node-RED editor. For now the focus is on TailwindCSS syntax support.

It's a proof of concept at this stage - expect bugs and rough edges.

2 Likes
2

Interesting concept. I have no experience with React, but perhaps this could work for your project. I am personally not a fan of transpiling and all the scaffolding that comes to these frameworks and as a result I use alpinejs all the time with tailwind, but a jit version.

Someone created a pure javascript/browser implementation library called vimesh without having the need to build, it supports tailwind 3.7 to a large extend - the library is about 32kb and works flawlessly, don't know if this could work for your project/react, but could perhaps save some work/headaches.

1 Like
3

Without wishing to undermine your efforts, I would point out a couple of things that you might wish to consider (and perhaps already have - if so, please forgive or ignore me :smiley: ).

Firstly, creating a set of nodes specifically tied into a front-end framework - in this case, tied into 2 complex frameworks - can end up being very fragile due to the ongoing developments of the frameworks. We have already crossed this issue once with the slow demise of the original Node-RED Dashboard.

Secondly, once started, it is a LOT of work both to develop (as seen by the amount of traffic on this forum related to Dashboard 2). As well as to maintain.

Now, there may well be room for another set of front-end nodes for Node-RED but we have already seen other efforts rapidly fall by the wayside which is, I am sure, frustrating and annoying for the author as well as for users.

And in case it isn't clear, I am the developer of UIBUILDER for Node-RED which can be used with no front-end framework, or with any framework(s) you like. I've been working on it for over 10 years now so that people can have some level of assurance that it is here to stay and in active ongoing development. If you look through the documentation at the changelog and roadmap, you will get a feeling for just how much effort is involved. :smiley:

2 Likes
4

In my opinion React has a solid market position and that's not changing anytime soon.
This package is being built to complement my platform for managing Node-RED instances, which will most likely also be open source.

It significantly simplifies working with Three.js, @react-three/fiber and @react-three/drei inside Node-RED. The trade-off is that esbuild is required as a build step.
I'm also considering adding Tailwind CSS as an option.

A new alpha has just been published with a changed approach to pages bundling and caching, added static assets manager. New examples.

1 Like
5

True. Perhaps good for larger projects with big, dedicated teams for sure. For smaller projects and 1-man bands, it is a very large and largely unnecessary overhead with modern HTML, CSS, and JavaScript.

Still, as previously said, there is room for more options in the Node-RED world. :smiley:

Sounds good and I wish you all the best in your endevour.

2 Likes