How to Create a Desktop App using React, Electron, and TailwindCSS

Do you want to create a Desktop app using React? Here's how you do it.
In this tutorial, learn how to build a cross-platform desktop application using React, Electron, and TailwindCSS. We'll cover the basics of setting up your development environment, integrating React with Electron, and styling your app with TailwindCSS for a sleek, modern look.
Timestamps:
00:00 Intro
00:30 Start Project
00:50 Initialize Electron
01:59 Install Dependencies
03:40 Install React
09:35 Setup Tailwind
GitHub Repo: github.com/CodeTega/desktopRe...
Don't forget to like, subscribe, and hit the bell icon for more tutorials like this! Let's dive into building powerful desktop apps together.
Let's cooooooode!

[@hesamalavi495]

Thanks a billion mate

[@gustavo-seedcode]

tremendo amigo, te ganaste un suscriptor :)

[@user-fm4wm5xx1q]

Thanks bro... Tailwind initialization was the thing that was not able to do

[@CodeTega]

Anytime! Let me know if there is anything related you think I should make a video on! Appreciate the support and feedback, means a lot!

[@nubcops220]

Can you please upload a short video on how to use the route thing in React with electron? I have been trying for the past 4 hours by watching tutorials and trying to read the react docs and nothing is working. Your tutorials are so easy to understand and directly to the point !

[@CodeTega]

I’ll get one made for sure!

[@nubcops220]

@@CodeTega thank you man, I wish I could support you financially I am currently in a 3rd world country we dont even have paypal. Once I get the chance I will you really help lots of people on daily basis much ❤️

[@LakhveerSingh-r7k]

please make a tutorial for building an exe file from this setup

[@pedrogarateguy3261]

Que capo!! 😃👍🏼

[@CodeTega]

Gracias Hermano!

[@mubeenmubeenfr]

Make more videos on electron js project bro...thanks for the explanation

[@CodeTega]

Appreciate the feedback! Means a lot. I have one coming on connecting databases here soon for electron.

[@mubeenmubeenfr]

@@CodeTega ohh that's good...iam waiting for that bro

[@user-cm8cj7ci2s]

how to build this app for window and linux

[@peterkibet7720]

Its cross platform runs on any os, personally using ubuntu

[@aaditya_ai]

Great content! Instant subscribed ! Can you make next tutorial on supabase with electron like supabase oauth and basic crud.

[@CodeTega]

I appreciate that! Thank you! And that’s a great idea, I’ll get on it

[@aymericcappelle9104]

I have an error when I clone your project, install with npm & start, only on MacOS. "[plugin-webpack] Launching dev servers for renderer process code." The app doesnt launch, do you have an idea? Thanks for the video :)

[@CodeTega]

I’ll look into it and get a solution

[@SmeetBarot]

Hello , how can i create exe file ?

[@cmtg4471]

Just a quick question, hav you tried electron-vite? Can we add tailwind css if I built my electron-react app in vite?

[@CodeTega]

You can, I think the rendering might be different in local, but it should be a similar set up as in this video.

[@cmtg4471]

@@CodeTega I just made it work on the electron-vite just now, and it looks like its pretty similar on how you installed it, there are some settings that you really need to dig into since it was not present on any documentation and there is hardly no references on the web, thank goodness I found something that work for the project I am working on, and also thanks for the quick response.

[@sanket4493]

Which VS theme is this?

[@CodeTega]

It’s called Shades of Purple. It’s awesome

[@user-pm5rk1bt4h]

suggest me how to perform routing in this.. as i have setup the electron react application using this process

[@CodeTega]

You can npm install react-router-dom Wrap your app in tags Thins in your app handle routing with react router dom library Routes and then Route

[@CodeTega]

I’ll make a tutorial on this

[@user-pm5rk1bt4h]

@@CodeTega i did the same, when i am adding a single component in my root.render i am able to see but when i add the following in root.render on npm start it shows just a white screen, i dont know why, plus how to use the fetch, axios and all in the application. please help

[@user-pm5rk1bt4h]

@@CodeTega please do

[@user-pm5rk1bt4h]

@@CodeTega any updates?

[@Bright-Great]

how can we use database and convert it into an installable software?

[@CodeTega]

There are a couple options and I’m going to make a couple videos on them now that you brought it up. You can use an noSql db like firebase if users are going to be required an internet connection and have an authentication service. But if you want an air gapped database style working within your app, then something like SQLlite would be ideal. But that’s a great idea for a video so I’ll make some content on that. Thank you!

[@kvazaios5026]

as @CodeTega said SQLlite would be ideal for an installable software. You can set up an express api inside the main process of the electron app and use Sequalize ORM that has an SQLlite driver. You can still use mysql as well if you think that SQLlite does not satisfy your app's requirements, but then on every installation you should also install mysql on your client's computer. I am pretty sure you can make a custom installer that also contains mysql but it's a bit complicated, especially if the target group has no technical knowledge

[@intoellesmind2619]

This was a godsend. I was struggling so much trying to connect Tailwind to my already made electron + vitejs project. Any idea why Bootstrap worked for that project, but when installing tailwind it all just went to hell? The main problem was that Electron didn't really recognize that the generated /dist files were for the body in the css case. Then, it tried finding files in C: instead of dist/assets/. I tried using base ref and every solution under stackoverflow and chatgpt, but to no avail.

[@CodeTega]

Yeah that sound right in line with all the style integrations issues electron has. Ill try to duplicate it and see what I run across. Tailwind is amazing, but the implementation across frameworks is tricky and for sure needs some work on their end.