Install Svelte-kit Efficiently (svelte-kit + vite + tailwindcss + daisyui)

Install Svelte-kit Efficiently

Installing Svelte-kit Efficiently

NOTE: Svelte-kit requires updated node js in the system

  1. Run this command to create a blank Skelton project
    npm create svelte@latest .
    or Run
    npm create svelte@latest my-app
    This will create the project on the current directory
  2. Install node modules This will create the project on the my-app directory
    npm i
  3. Run dev Server
    npm run dev -- --dev
  4. Add tailwind using npx and svelte-add
    npx svelte-add@latest tailwindcss
  5. Install daisyui
    npm i daisyui
  6. Open tailwind.config.cjs add daisyui using add this line inside the plugin array require('daisyui')
    const config = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
       extend: {}
    },
    plugins: [require('daisyui')]
    };
    module.exports = config;
    Open app.html then add the theme to html language tagIf you want dark theme of daisyui then
    <html data-theme="dark"></html>
  7. Run the dev server
    npm run dev -- --host