/taurine

Primary LanguageTypeScript

setup tauri + tailwind + shadcn

1- bootstrap tauri

bun create tauri-app@latest

and cd the folder and install deps

2- add tailwindcss

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

3- go to src/styles.css and paste:

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

3- go to tsconfig.json and inside compilerOptions paste:

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

4- after run

bun add -D @types/node

5- open tailwind.config.js and add

import path from "path"
...

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

6- init shadcn

bunx --bun shadcn-ui@latest init

NOTE: don't forget that the global css is under src/styles.css not src/index.css

7- try it out

bunx --bun shadcn-ui@latest add button