Tailwindcss

<h1 align="center">💨 Add Tailwind CSS to Svelte</h1>

This is an adder for svelte-add; you should read its README before continuing here.

➕ Adding Tailwind CSS

This adder's codename is tailwindcss, and can be used like so:

shCopy
npx svelte-add@latest tailwindcss

🏞 Supported environments

This adder supports SvelteKit and Vite-powered Svelte apps (all the environments svelte-add currently supports).

⚙️ Options

• forms (default false): whether or not to install and set up the Tailwind CSS Forms plugin.

• typography (default false): whether or not to install and set up the Tailwind CSS Typography plugin.

• daisyui (default false): whether or not to install and set up daisyUI as a Tailwind plugin.

shCopy
npx svelte-add@latest tailwindcss --tailwindcss-forms --tailwindcss-typography --tailwindcss-daisyui

🛠 Using Tailwind CSS

After the adder runs,

• You can use Tailwind utility classes like bg-blue-700 in the markup (components, routes, app.html).

• You can use Tailwind directives like @apply and @screen or use the theme function in Svelte style lang="postcss" blocks or the src/app.pcss file.

• You can configure Tailwind in the tailwind.config.cjs file.

• Your Tailwind CSS will be purged for production builds.