Installation and setup

Storybook is an optional tool. This page covers how to add it to a project and — the step that's easy to miss — how to make Tailwind work inside it, so your stories render with the same styles as the app.

Installing Storybook

From your project's root directory, run the Storybook CLI:

npm create storybook@latest

It inspects your dependencies to detect the framework (React, Vue, Angular, Next.js, SvelteKit...) and builder, then installs the required packages, adds a .storybook/ config folder, and creates a few example stories. During setup you'll be prompted to pick a Recommended or Minimal configuration.

Once it's done, start the local dev server:

npm run storybook

Exact prerequisites and options vary per stack — see the official Storybook installation guide and the framework support pages.

Pointing Storybook at your stories

.storybook/main.ts is Storybook's main configuration file — it declares where your stories live, which addons to load, and the framework/builder. Stories are discovered through its stories glob; the CLI generates a default (often under src/), so if your components live elsewhere — like components/ui/ — update it to match:

// .storybook/main.ts
export default {
  stories: ["../components/ui/**/*.stories.@(ts|tsx)"],
  // ...
};

Making Tailwind work in Storybook

By default, Storybook renders components in isolation and knows nothing about your app's global CSS. So Tailwind's utilities, your design tokens, and custom utilities like heading-1 or layout-container are simply absent — components look unstyled.

The fix is to import your global stylesheet — the one with @import "tailwindcss" and your tokens — in .storybook/preview.ts (generated by the CLI during install):

// .storybook/preview.ts
import type { Preview } from "@storybook/react";

// Global styles: Tailwind + design tokens (same entry the app uses)
import "../src/styles/index.css";

const preview: Preview = {
  // parameters, global decorators, etc.
};

export default preview;

Adjust the type import (@storybook/react, @storybook/vue3...) and the CSS path to your project. The key point: import the same CSS entry your app uses, so Storybook and the app share one source of truth for styling.

WARNING

Without this import, Tailwind classes won't apply in your stories — including design tokens and custom utilities. If a story looks unstyled, this is almost always why.

Next steps

Once Storybook runs and Tailwind is wired in, continue with Story Structure.