Unleashing the Power of SvelteKit, Tailwind CSS, and DaisyUI

Embarking on a journey to build a remarkable web project? Look no further!

In this guide, we’ll explore the seamless integration of SvelteKit, Tailwind CSS, and DaisyUI — a trio that promises not just efficiency but a touch of elegance to your development experience.

Demo

Table of Contents

· 1 Create Your SvelteKit Project
· 2 Install Tailwind CSS
· 3 Enable PostCSS in style Blocks
· 4 Configure Your Template Paths
· 5 Add Tailwind Directives to Your CSS
· 6 Import the CSS File
· 7 Integrate DaisyUI
· 8 Test Your Setup
· 9 Run the Dev Server

1 Create Your SvelteKit Project

Let’s kick things off by setting up your SvelteKit project. If you haven’t already, run the following commands:

$ npm create svelte@latest my-awesome-project
$ cd my-awesome-project

2 Install Tailwind CSS

Now, let’s bring in the styling magic. Install Tailwind CSS and its companions:

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

3 Enable PostCSS in style Blocks

Make your styles shine by enabling PostCSS processing. In your svelte.config.js file, add the following:

Please note that the vitePreporcess may be already setup

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite'; // Add import

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess() // Add preprocessor
};

export default config;

4 Configure Your Template Paths

Ensure Tailwind knows where to do its magic by specifying template paths in tailwind.config.js:

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

5 Add Tailwind Directives to Your CSS

In ./src/app.css, add the @tailwind directives for each layer:

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

6 Import the CSS File

Create ./src/routes/+layout.svelte and import your CSS:

<script>
  import "../app.css";
</script>

<slot />

7 Integrate DaisyUI

Enhance your game with DaisyUI. Install and configure it in tailwind.config.js:

$ npm i -D daisyui@latest @tailwindcss/typography

Then add daisyUI and Typography to your tailwind.config.js files

Make sure you require daisyui AFTER @tailwindcss/typography

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

8 Test Your Setup

Let’s ensure everything’s running smoothly. Inside ./src/routes/+page.svelte, create a test template:

<main class="flex flex-col items-center justify-center h-screen w-full">
 <div class="flex gap-2">
  <button class="btn btn-primary">Primary</button>

  <div class="dropdown">
   <div tabindex="0" role="button" class="btn m-1">Click</div>
   <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
   </ul>
  </div>
 </div>

 <div>
  <article class="prose">
   <h1>Garlic bread with cheese: What the science tells us</h1>
   <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to
    their children, with the food earning such an iconic status in our culture that kids will
    often dress up as warm, cheesy loaf for Halloween.
   </p>
   <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies
    cases springing up around the country.
   </p>
  </article>
 </div>
</main>

9 Run the Dev Server

Fire up the dev server and witness your creation in action:

$ npm run dev

Template rendered correctly

Visit http://localhost:5173/ and revel in the beauty. Note: The template might appear in dark mode; we’ll delve into theming in a future post.

Ready to craft extraordinary web experiences? Your journey with SvelteKit, Tailwind CSS, and DaisyUI has just begun! 🚀✨