Tauri Tutorial: Create a Desktop App in 5 Minutes (React + Tailwind)

Three commands to scaffold, install, and run. The fastest path from "I want a desktop app" to "I have one running on my machine."

Tauri's scaffold tool plus React plus Tailwind gets you from a clean directory to a styled, hot-reloading desktop app in under five minutes. This lesson is the speedrun: the absolute minimum steps, no theory.

Three commands

npm create tauri-app@latest my-app
cd my-app
npm install
npm run tauri dev

That is the whole flow. Let's walk what each does.

Scaffold

npm create tauri-app@latest my-app

Follow the prompts:

• Project name — my-app (or whatever you typed).
• Identifier — com.you.my-app (used for OS bundle identifiers).
• Choose UI — TypeScript / React.
• Choose UI template — vite.
• Add Tailwind — yes (some templates have a Tailwind option directly; if not, add it after).

The output:

my-app/
├── src/                   # React frontend
├── src-tauri/             # Rust backend
├── index.html
├── package.json
└── vite.config.ts

Two halves; one project.

Add Tailwind (if the template didn't)

If your template skipped Tailwind, three more commands:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Configure tailwind.config.js:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Add Tailwind to your CSS — src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

That's the standard Tailwind setup. Same as a regular React project.

Run

npm run tauri dev

First run is slow (Cargo compiles ~30 seconds). After that, hot reload is fast — frontend changes appear instantly, Rust changes trigger a quick re-compile and window restart.

A native window opens with the React app inside. The window has a normal title bar and chrome — looks and behaves like any other desktop app on your OS.

Style something

Open src/App.tsx and replace the body with:

function App() {
  return (
    <main className="min-h-screen bg-slate-900 text-white flex items-center justify-center">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold">Hello, Tauri</h1>
        <p className="text-slate-400">Built with React, Tailwind, and Rust.</p>
        <button className="px-6 py-3 bg-blue-500 rounded-lg hover:bg-blue-600 transition">
          Click me
        </button>
      </div>
    </main>
  );
}

export default App;

Save. The window updates without a restart. You have a styled desktop app.

Build for distribution

When you're ready to ship:

npm run tauri build

The output is in src-tauri/target/release/bundle/:

• macOS: MyApp.app and MyApp_0.1.0_x64.dmg
• Windows: MyApp_0.1.0_x64-setup.exe and MyApp_0.1.0_x64_en-US.msi
• Linux: my-app_0.1.0_amd64.deb and my-app_0.1.0_amd64.AppImage

Drop these into a release artifact store (GitHub Releases, your website) and your app is ready to install.

Why this stack works

• React — the most-used UI library; everyone knows the patterns.
• Tailwind — utility-first CSS without a separate stylesheet. Designs ship faster.
• Vite — sub-second hot reload. Small config; reasonable defaults.
• Tauri 2 — native window, native menus, OS-specific APIs via plugins, tiny bundle.

You can swap any layer (Vue or Svelte for React, vanilla CSS for Tailwind) without touching the others. Tauri doesn't care what frontend framework you pick.

Common mistakes

Running npm run dev instead of npm run tauri dev. The first runs Vite in a browser tab. The second wraps it in a Tauri window.

Hot reload not working on Rust changes. Save the Rust file. Tauri detects the change and rebuilds. If you don't see the rebuild, make sure your editor saved the file.

Tailwind classes not applied. Confirm tailwind.config.js lists ./src/**/*.{js,ts,jsx,tsx} in content. Otherwise Tailwind doesn't scan your component files for classes.

Build fails on macOS with codesigning errors. First-time builds may need Apple Developer signing credentials. For local development, set TAURI_BUNDLE_TARGETS=app to skip the .dmg/.pkg signing step.

What's next

You have a desktop app shell. Next we put real functionality inside it: Rust commands callable from the frontend, file I/O, native dialogs. Lesson 3 starts that journey with the project structure deep dive.

Recap

npm create tauri-app@latest plus React/TypeScript/Vite plus optional Tailwind. Three commands to scaffold and run. Hot reload for both halves. npm run tauri build for a native installer.

Five minutes from zero to a running desktop app.