Tauri

Install and configure Tauri.

Prerelease Warning

This installation guide is for the prerelease version of Tauri 2.0 and is subject to change as development continues.

Create project

Start by creating a new Tauri project:

npm create tauri-app@latest --beta

When asked make sure to use Solid:

✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript
✔ Choose your UI template · Solid
✔ Choose your UI flavor · TypeScript

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

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

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error

# (so you can import "path" without error)
npm i -D @types/node

import path from "path"
 
import solid from "@vitejs/plugin-solid"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src")
    }
  }
})

Run the CLI

Run the solidui-cli init command to setup your project:

npx solidui-cli@latest init

Configure ui.config.json

You will be asked a few questions to configure ui.config.json:

Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/App.css
Where is your tailwind.config.js located? tailwind.config.js
Configure the import alias for the src directory: ~/*

That's it

You can now start adding components to your project.

npx solidui-cli@latest add button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "~/components/ui/button"
 
export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Integration into existing projects

If you already have a SolidStart, Vite or Astro project with solid-ui set up you can add Tauri by simply following the steps provided here.