How to install SvelteKit with daisyUI?

SvelteKit is a meta framework for building web applications. It is based on Svelte, a compiler that turns your Svelte components into fast and efficient JavaScript.

The biggest advantage of using Svelte, aside from speed and developer experience, is that it’s a disappearing framework. It doesn’t add any runtime library to your app, so you would only ship the code that you actually use.

If you haven’t used Svelte before, You would be surprised how easy it is to learn compared to other frameworks.

#How to install SvelteKit?

1. To start new SvelteKit project, you can use the following command:

npm create svelte@latest my-app

It asks you a few questions. Let’s pick Skeleton project:

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project
└

2. After the setup is done, go to the project directory and install dependencies and start the development server:

cd my-app
npm install
npm run dev -- --open

It opens a new browser tab at http://localhost:5173/ and you can see Welcome to SvelteKit message!

That’s it! You have a new SvelteKit project.

#How to add Tailwind CSS and daisyUI to SvelteKit?

1. Install Tailwind CSS, PostCSS, Autoprefixer and daisyUI, Then generate tailwind.config.js and postcss.config.js files:

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

2. Edit tailwind.config.js file. Add content and plugins to it:

/** @type {import('tailwindcss').Config} */
export default {
- content: [],
+ content: ['./src/**/*.{html,svelte,js,ts}'],
  theme: {
    extend: {},
  },
- plugins: [],
+ plugins: [require('daisyui')],
}

3. Add the following lines to svelte.config.js file:

import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ preprocess: vitePreprocess(),
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter()
  }
};

export default config;

4. Create a new src/routes/+layout.svelte file and import tailwindcss/tailwind.css in it using this command

echo '
<script>
  import "tailwindcss/tailwind.css";
</script>

<slot />
' > src/routes/+layout.svelte

#How to use daisyUI components in SvelteKit?

Add a daisyUI button to src/routes/+page.svelte file:

 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<button class="btn btn-primary">Hello daisyUI</button>

Run the development server and see the button with daisyUI styles!

npm run dev -- --open

Easy, right?

Explore all the daisyUI components you can use in your project, And also check out the SvelteKit docs to learn more about SvelteKit.