Hopp til hovedinnhold
Blogg og artikler

Fra bloggen,

Setting up Storybook 7 with Vite and Tailwind CSS

Setting up Storybook with Tailwind can be quite a challenge, and there are a lot of recipes out there that either don’t work or are outdated. The Storybook web site points out the highlights of using Storybook 7 with Vite:

Skrevet av

  • Gløer Olav Langslet

    Tidligere seniorkonsulent

  • 🏎️ Pre-bundled for performance
  • 🙅 No Webpack and smaller install size
  • 🪄 Zero config
  • 🌐 Vue 2 + 3, Svelte, React, and more

And I managed to easily set this up in three steps:

  1. Create a project with Vite
  2. Add Tailwind
  3. Add Storybook

1 Create the Vite project

A) Create a new project from a terminal

sh
npm create vite@latest

I opted for a React project with TypeScript

Screenshot from the terminal where I chose React and TypeScript

B) In the terminal change directory to the project and run npm install - or just npm i

sh
cd my-vite-storybook-tailwind-project/
npm i

2 Add Tailwind to the project

A) Install Tailwind

sh
npm install -D tailwindcss postcss autoprefixer

B) Init the Tailwind config

text
npx tailwindcss init -p

C) Edit the config file

Now you have created both a tailwind and a postcss config file. You need to add the right file types that you want to style with Tailwind in the file tailwind.config.cjs:

typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
The document structure shown in VS Code

In the root folder of your project, you’ll find the Tailwind config file

D) Add the Tailwind directives to .src/index.css

text
@tailwind base;
@tailwind components;
@tailwind utilities;
Showing the content of the config file in VS Code

Replace the content of index.css

E) Check if it’s working like it should

In a terminal, start the dev server

sh
npm run dev
Showing the terminal window with the server running

The server is now running, and you can open it in a browser.

Add some Tailwind code to .src/App.tsx and to verify that it works as it should.

tsx
<h1 className="bg-orange-200 font-bold p-4">Vite + React + Tailwind</h1>

F) Now Tailwind should be working in your app

The web page with Tailwind styling in the browser

3 Add Storybook 7

A) Open a new terminal and add Storybook 7 to the project

text
npx sb@next init --builder=vite

If you are asked to migrate the project to npm7, answer y.

Screenshot where you are prompted if you want to migrate the project to npm7

B) Import the tailwind.css file to the .storybook preview.js file

javascript
import 'tailwindcss/tailwind.css'
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

C) Add some Tailwind classes to one of the stories

For instance you can add a nice orange background to the header element in .src/stories/Header.tsx:

text
<header className='bg-orange-200'>
Screenshot from CS Code showing changes in line 18 of the file

Showing the changes to the Header.tsx file

D) The result in Storybook should be something like this:

Screenshot of Storybook with Tailwind styles

References and tips

This blog post is based on the following articles:


To get Tailwind suggestions and code completion, I use the Tailwind IntelliSense extension in VS Code. It will also show you the CSS for the different Tailwind classes, which is pretty handy. Happy coding!

Har dere noe som skal bygges?

Vi lager systemer som tåler mange brukere og mange år i drift. Og vi liker å gjøre det sammen med dere.

Les om systemutvikling og arkitektur