How to Setup Vue 3, Daisy UI and TailwindCSS

In this guide, I’m using Tauri to create awesome Desktop app quickly !

Goal

Provide a simple way to get a reproducible script to setup default projects.

Script

Setup Tauri

https://tauri.app/v1/guides/getting-started/setup/vite

Install Rust:

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

Setup Tauri:

sh <(curl https://create.tauri.app/sh)

I used these values

# ✔ Project name · minimal-doc-poc
# ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
# ✔ Choose your package manager · npm
# ✔ Choose your UI template · Vue - (https://vuejs.org)
# ✔ Choose your UI flavor · TypeScript

You now have rust and tauri setup 🎉

Install dependencies:

Move to your project root.

cd minimal-doc-poc

npm install
npm install -D  daisyui \
                postcss \
                tailwindcss \
                autoprefixer \
                @vue/compiler-sfc

Setup the configuration files:

I use this configuration for tailwind:

cat <<EOF  > tailwind.config.js
module.exports = {
  plugins: [require("daisyui")],
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
};
EOF

The default and pretty basic src/style.css:

cat <<EOF > src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF

and the last one, the postcss.config.js:

cat <<EOF > postcss.config.js
module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};
EOF

This is it ✅

I used the npm run tauri dev command to start the tauri app, and automatically everything is loaded perfectly !