Wails3_svelte5_tailwind4

rgehrsitz

Wails 3 + Svelte 5 + Tailwind 4 + TypeScript + shadcn-svelte

This project is a Wails 3 desktop app with a Svelte 5 + Tailwind 4 frontend, TypeScript, and shadcn-svelte components. It’s configured for cross-platform development (macOS/Windows) and hot reload via wails3 dev.

Getting Started

Navigate to your project directory in the terminal.
To run your application in development mode, use the following command:
```
wails3 dev
```
This will start your application and enable hot-reloading for both frontend and backend changes.
To build your application for production, use:
```
wails3 build
```
This will create a production-ready executable in the build directory.

Frontend

Vite + Svelte 5 (Runes)
TypeScript configured with tsconfig.json (svelte-check for typechecking)
Tailwind 4 via @tailwindcss/vite and CSS-based config (@theme inline)
shadcn-svelte components installed via CLI

Key files:

frontend/src/main.ts → Vite entry
frontend/src/app.css → Tailwind v4 config, tokens, dark mode
frontend/components.json → shadcn-svelte config
frontend/vite.config.js → $lib alias for components and utils

Adding UI Components (shadcn-svelte)

To add a component using the CLI:

cd frontend
npx shadcn-svelte@latest add button

Import example:

<script lang="ts">
   import { Button } from "$lib/components/ui/button";
</script>

<Button>Click me</Button>

Notes:

We map $lib/utils.js → src/lib/utils/index.ts (TS + Vite alias) for CLI-generated imports.
Dark mode uses the .dark class and @custom-variant dark (&:is(.dark *)).`

TypeScript

Run type checks:

cd frontend
npm run typecheck

Ambient types for Wails bindings live in frontend/src/global.d.ts.

Tailwind 4

Tailwind is configured in CSS (no tailwind.config.*): see frontend/src/app.css.
Animations via tw-animate-css.
Tokens set in :root and .dark with @theme inline mapping to Tailwind tokens.

Wails Docs

Happy coding! If you encounter any issues, consult the docs above or open an issue.

Top categories