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.

One import

ikada is built for Tailwind CSS v4 (tailwindcss ^4.3). theme.css carries the tokens as @theme, the light and dark variables, and an @source for the compiled components, so nothing else is needed.

/* app.css */
@import "tailwindcss";
@import "@sproutboat/ikada/theme.css";

How classes are found

Tailwind does not scan node_modules unless told to. theme.css contains @source "./**/*.js", which is relative to the file itself, so Tailwind reads the compiled components and generates exactly the utilities they use. Add your own @source only for other packages. A component you copied with the registry lives in your project and is scanned like the rest of your code.

/* 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>, the shadcn and next-themes convention, and the dark: variant follows it.data-theme="dark|light" still works as a deprecated alias in 0.2 and goes in 0.3.0.

<html lang="en" class="dark">

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

The type scale

ikada's sizes are text-sb-xs to text-sb-metric, so installing ikada never changes what your own text-sm means. The npmtheme.css also keeps the plain --text-* sizes for 0.1.x apps (deprecated, removed in 0.3.0); the registry theme defines only the scoped ones.

/* 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/, and the theme's variables are all prefixed --sb-, so they sit next to shadcn's --background and friends without touching them.

Vite and Next.js

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ plugins: [tailwindcss()] });

// postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };

Neither needs transpilePackages: the package ships compiled ESM with "use client" kept, so a Server Component can render it.