<aside> ℹ️ Check out Svelte Add project on GitHub to npx install and configure Tailwind CSS

</aside>

You may have noticed a on the CLI install step a link to Install community-maintained integrations

Install community-maintained integrations: https://github.com/svelte-add/svelte-adders

You can use that to configure Tailwind CSS for the SvelteKit project.

npx svelte-add@latest tailwindcss --typography --daisyui
pnpm i # or whichever package manager you’re using

The svelte-add script doesn’t install dependencies, remember to install them before starting the dev server.

<aside> 💡 Once the configuration is finished don’t forget to pnpm i the dependencies.

</aside>

Once installed check the tailwind.config.cjs file for the daisyUI configuration:

const daisyui = require('daisyui');
const typography = require('@tailwindcss/typography');

const config = {
	content: ['./src/**/*.{html,js,svelte,ts}'],

	theme: {
		extend: {}
	},

	plugins: [typography, daisyui]
};

module.exports = config;

You can now start adding Tailwind classes directly into your Svelte project markup!

<aside> ℹ️ Note the changes made to the project after the Tailwind configuration.

</aside>