Skip to content

f1nzo/Tauri-Svelte-Tailwind

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 

Repository files navigation

Create the project

npm create tauri-app@latest

Select these options:

  1. npm
  2. svelte

Install Dependencies

cd [APP NAME]
npm install

Install TailwindCSS (svelte)

Project root:

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

Tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

./src/style.css:

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

app.svelte test code:

  <p class="text-3xl font-bold underline">
    Hello world!
  </p>

run project:

npm run tauri dev

Optional: DasiyUI

install daisyUI:

npm i daisyui

modify tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: [require("daisyui")], // added daisyui as a plugin
};

POSSIBLE ERRORS

command: npx tailwindcss init -p

error: TypeError: Object.fromEntries is not a function

fix:

  1. sudo npm i -g n
  2. n latest
  3. close and re-open terminal

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published