Following the last article (https://echozulu.hashnode.dev/getting-started-with-electron-forge-webpack) where I got stuck attempting to have multiple views, I decided to try Tauri 2.0; this time with React and Tailspin CSS.

I am also using Cursor AI for this development, so when I use “we” within this article, it indicates iteration with the AI model within Cursor.

Goals

I’d primarily like to demonstrate the basic elements of a typical Windows application and try out Tailspin components within that context. Goals include:

Menubar, Toolbars, Status Bar
Buttons, Input Boxes, Progress Bar functionality
Themes
Dashboard view with chart

Part 1 - Initial Setup

C:\Projects\blog\20241229-tauri-tailwind>npm install -g yarn pnpm

added 1 package, and changed 1 package in 2s

1 package is looking for funding
  run `npm fund` for details

C:\Projects\blog\20241229-tauri-tailwind>pnpm create tauri-app
.../194146a1c9a-d1dc                     |   +2 +
.../194146a1c9a-d1dc                     | Progress: resolved 12, reused 0, downloaded 2, added 2, done
✔ Project name · tauri-react-app
✔ Identifier · io.echozulu.tauri-react-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript


  cd tauri-react-app
  pnpm install
  pnpm tauri dev

It took some iteration beyond the following prompt to get this right (mainly typescript tsx vs jsx), but not much. The result

📝

please create an example native menu bar. Also, please add a standard windows toolbar with svg icons for cut, copy, paste, a larger standard windows toolbar below that with 32x32 svg icons along with text ("Dashboard", "Test" and "Convert") where only one toolbar item can be selected at a time and create corresponding react components for those views. Lastly, create a standard windows status. Be sure that window resize is taken into account. The menubar, toolbars and status bars should always be visible with the main body scaled and with vertical scrollbar only if necessary.

pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p
pnpm add @headlessui/react

🔗

https://github.com/ericjameszimmerman/tauri-react-app/releases/tag/0.1.0

Part 3 - Dashboard and About Box

Next we’ll populate the Dashboard view and some other general examples. For the Dashboard, AI suggested reCharts. https://recharts.org/en-US/examples.

Next, please update the dashboard view to include 4 primary monitors and a line chart of those primary monitors with a 30 second fifo window.

pnpm add recharts date-fns
pnpm add -D @types/recharts

could you add a Help > About menu and a new component for a standard about dialog box? The dialog box should be opened centered to the parent window. Rather than opening modal, if the user clicks away from the dialog (lose focus likely), the about window should be closed. It should not be possible

to open multiple about dialog windows

At this point, we have a native-looking application with basic functionality and using React components.

🔗

https://github.com/ericjameszimmerman/tauri-react-app/releases/tag/0.2.0

Part 4 - Test View, Convert View

Test View

Next, please update the "Test" view to comprise of a selection of tailwind css components such as buttons, input boxes, progress bars, labels, drop-downs, toggle buttons, badges, cards, etc.

Convert View

Next, please update the convert view. I'd like a left-right split view, where a multi-line textbox is on the left and a live preview pane is on the right. I'd like to live preview plantuml or mermaid, whichever is easier to integrate.

pnpm add mermaid

Minor revision for vertical spacing

please revise editor and preview panes to both fill the available vertical space. Those panes should be the same height. If the mermaid output content is larger, either add a scrollbar to the pane or resize the image to fix the space. The present editor pane is a little too short also. Please fill available space with some minimal margin.

🔗

https://github.com/ericjameszimmerman/tauri-react-app/releases/tag/0.3.0

Preliminary Performance Evaluation

These applications don’t do a while lot, but wanted to do an initial performance check anyways.

I used SysInternals Process Explorer on the production build for each of these.

The main take-aways; Tauri has a single thread and uses less RAM than Electron. Neither are using much CPU.

Getting Started with Tauri, React and Tailspin CSS

Table of contents