# Tailwind v4 setup

How ikada fits a Tailwind CSS v4 project: one import for tokens and component classes, dark mode as a class, and what ikada never touches.

Source page: https://sproutboat.com/ikada/tailwind

## One import
```css
/* app.css */
@import "tailwindcss";
@import "@sproutboat/ikada/theme.css";
```
`theme.css` carries the tokens (`@theme`), the light and dark variables and an `@source` for the compiled components, so no other line is needed.
## How classes are found
Tailwind skips `node_modules` by default. ikada's `theme.css` contains `@source "./**/*.js"` relative to itself, so it scans the compiled package. Add your own `@source` only for other packages.
```css
/* Only needed to scan other packages or your own folders that Tailwind skips */
@source "../node_modules/some-ui-kit/dist";
```
## Dark mode
Light is the default. Dark is a `dark` class on `<html>` (shadcn and next-themes `attribute="class"`). The `dark:` variant follows the class. `data-theme="dark|light"` still works for one release and is removed in 0.3.0.
```html
<html lang="en" class="dark">
```
```tsx
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>
```
## The type scale
Components use `text-sb-xs` to `text-sb-metric`, so a host's own `text-sm` keeps Tailwind's size. The npm `theme.css` also keeps the plain `--text-*` sizes for 0.1.x apps (deprecated); the registry theme defines only `--text-sb-*`.
```tsx
/* ikada's sizes are text-sb-*; your text-sm is still Tailwind's */
<p className="text-sb-base">Body</p>
<h2 className="text-sb-lg">Title</h2>
```
## With the shadcn registry
`npx shadcn@latest add @ikada/theme` merges the same tokens into your CSS. Components install to `components/ikada/`, never over your own shadcn files.
## Vite and Next.js
```ts
// vite.config.ts
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ plugins: [tailwindcss()] });
```
```js
// postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };
```