SvelteKit with TailwindCSS and DaisyUi

In this post we will see how to create a SvelteKit project and configure TailwindCSS and DaisyUI

Svelte and SvelteKit

Svelte was recently voted the most loved web framework with the most satisfied developers in a pair of industry surveys. I am not gonna lie. I love it too. In fact my entire blog/portfolio is built with svelte using svelte kit framework and deployed on Vercel.

TailwindCSS

Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. It lets us # rapidly build modern websites without ever leaving your HTML.

DaisyUi

DaisyUi is a CSS library which provides a variety of CSS classes to customize components such as button, alert much like Bootstrap but cool thing about DaisyUi is that it acts as an extension of tailwind in the form of plugin, which means only the classes that we use in our project will be included in the final CSS bundle. At the moment DaisyUi provides 45 componentsand 22 themes. In addition to this we could provide our own theme colors and pick whichever we want and purge the rest.

Create your project

We can easily create a svelte kit app, using the svelte@next command. It will asks us a series of question on the project setup. you can choose the things you want for you project stack.

npm init svelte@next royal-gamma

My preferences

√ Which Svelte app template? » Skeleton project
√ Use TypeScript? ... Yes
√ Add ESLint for code linting? ... Yes
√ Add Prettier for code formatting? ... Yes

cd royal-gamma
npm i
npm run dev -- --open

Install Tailwind CSS

We need to install tailwindcss, postcss and autoprefixer as dev dependencies.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

Rename `postcss.config.js` to `postcss.config.cjs`:

mv postcss.config.js postcss.config.cjs
# or 
rename postcss.config.js postcss.config.cjs

Configure your template paths

Add the paths to all of your template files in your tailwind.config.cjs file.

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Add the Tailwind directives to your CSS

Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers.

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

Import the CSS file

Create a ./src/routes/__layout.svelte file and import the newly-created app.css file.

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

Install DaisyUi

npm i -D daisyui

Add DaisyUI to project

Then add daisyUI to your tailwind.config.js files:

module.exports = {
  //...
  plugins: [require("daisyui")],
}

Add some content

Add some content in index.svelte file

<div class="dropdown">
  <label tabindex="0" class="m-1 btn">Click</label>
  <ul tabindex="0" 
      class={`p-2 shadow menu dropdown-content 
	  bg-base-100 rounded-box w-52`}
  >
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Start the server

npm run dev

SvelteKit, TailwindCSS and DaisyUI Starter project