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:

```bash
npx sv add tailwindcss
```

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

```ts title="vite.config.ts"
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

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

```css title="src/app.css"
@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:

```css title="src/app.css"
@import 'tailwindcss';
@source '../packages/ui/components';
```

The path is relative to the stylesheet.

> [!WARNING]
> Do not build class names dynamically (for example by concatenating a colour name into a class string) when you edit component source. Tailwind only sees complete class names that appear literally in scanned files.

## 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](/docs/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.