💨 Add Tailwind CSS to Svelte
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:
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
(defaultfalse
): whether or not to install and set up the Tailwind CSS Forms plugin. -
typography
(defaultfalse
): whether or not to install and set up the Tailwind CSS Typography plugin. -
daisyui
(defaultfalse
): whether or not to install and set up daisyUI as a Tailwind plugin.
🛠 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 thetheme
function in Sveltestyle lang="postcss"
blocks or thesrc/app.postcss
file. -
You can configure Tailwind in the
tailwind.config.cjs
file. -
Your Tailwind CSS will be purged for production builds.