Svelte with Tailwind and Daisy UI

19th of October 2022

In this guide, we will see how to create a Svelte project with TailwindCSS and Daisy UI installed.

It is quite straightforward but requires you to copy and replace several files.

Create the base project

Create a Svelte project by running npm init vite and selecting Svelte.

Install the dev dependencies

Install the dev dependencies by running npm install --save-dev autoprefixer daisyui postcss tailwindcss

Create the configuration files

Create postcss.config.cjs with the following configuration:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Replace svelte.config.js with the following configuration:

import preprocess from 'svelte-preprocess'

export default {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}

Create tailwind.config.cjs with the following configuration:

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

Add the CSS imports

Add the following three lines to your main CSS file (usually app.css)

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

That’s it, now you should have a running project that uses Svelte and DaisyUI.