Tailwind prerequisites

Components are styled with Tailwind CSS utility classes written directly in the markup. Tailwind generates CSS only for classes it finds in the files it scans, so a component can render unstyled if its directory is not being scanned. Check source detection before changing the design.

Tailwind CSS 4 is required #

Every component declares tailwindMajor: 4. Tailwind 3 configuration (tailwind.config.js content globs, the @tailwind directives) is not the reference setup and has not been tested with these components.

Adding Tailwind to a SvelteKit project #

If your project does not use Tailwind yet, the Svelte CLI can add it:

npx sv add tailwindcss

A minimal manual setup uses the Vite plugin and a stylesheet imported by your root layout:

import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [tailwindcss(), sveltekit()]
});

@import 'tailwindcss';

Make sure component files are scanned #

Tailwind 4 detects sources automatically, starting from your project root and skipping files ignored by git. Components placed inside src/ are usually picked up without any configuration.

If you keep components somewhere that is not detected, for example a directory listed in .gitignore or a shared package outside the project, register it explicitly:

@import 'tailwindcss';
@source '../packages/ui/components';

The path is relative to the stylesheet.

Existing global styles #

Components that declare palette tokens keep those values in their own scoped <style> block as --_local: var(--public, fallback) and expose them through CSS variables (see customization). Components without tokens use Tailwind utility classes only, and you customise them by editing those classes. Either way, adding a component is not meant to restyle the rest of your site. The reverse is not guaranteed: your global CSS can affect a component. If something looks different from the preview, check for broad global selectors (for example on a, button or h2) before editing the component, and check whether the component ships a style file you have not imported.

Dark mode #

Components that support dark appearance declare how it is selected in their modeSelection field. Read it on the component page and align it with how your site switches themes.