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: [
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.