Set up Storybook with Next.js project and Tailwind

Next.js using Tailwind with Storybook

Set up a Next.js project with the following command

if you have your preferred package manager, you can use that.

npx create-next-app@latest --typescript

You can use Tailwind CSS right away if you just select yes when they ask you 'would you like to use Tailwind CSS with this project.'

Now, add storybook into the project.

npx storybook init

When you're done installing Storybook, to use Tailwind CSS in stories directory, we will add a path into content in tailwind.config.ts.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,ts,jsx,tsx}", // Here!
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

open the Storybook.

npm run storybook

You will see like this.
Let's make a change to the button component and see if Tailwind CSS works in Storybook.

I changed the class from storybook-button--primary.
Then, let's see.

It doesn't work. To fix this, we need to import the 'globals.css' file in .storybook/preview.ts.

import type { Preview } from "@storybook/react";
import "../app/globals.css"; // Here!

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

In my case, the css path is '../app/globals.css', and we will remove the unnecessary style code in globals.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

/* body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
} */

Done! NextJS does everything for us.

I hope you found it useful.

Happy Coding!

---

Update 24.04.17

I received a comment it doesn't work with the below versions.

"storybook": "^8.0.8",
"tailwindcss": "^3.4.1",

I found that storybook doesn't work properly with mjs configuration files. It seems like it's because the recent nextjs project comes with the configuration file having mjs extension.

Here's a temporary solution.

---

1. Rename from postcss.config.mjs to postcss.config.js.

mv postcss.config.mjs postcss.config.js

2. Change export code as common js style

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

module.exports = config;

---

I hope somebody finds it helpful. Happy Coding!

Thanks for the comment @kamil_maje55390 !

Comments

[ankurnecessary]

This solution actually worked. Thanks for sharing this solution. However, I didn't change postcss.config.mjs to postcss.config.js and the versions that I am using in my next.js project are "storybook": "^8.3.2" and "tailwindcss": "^3.4.1". I have only imported global.css in preview.ts.

[Oscar]

Thank you very much for this tutorial, I spent several hours researching how to configure storybook with nextjs and many tutorials on the internet mentioned that I had to modify many files and install more libraries, and in the end none of them worked, your tutorial is the simplest and the only functional one, thanks :)

[SeongKuk Han]

I was there too, that's why I wrote this post. I also installed and uninstalled several packages. I'm really glad it helped :) Have a good day!

[hmdegroot]

Has anyone had luck with passing styles through storybook that aren't compiled in a component already? Like if I pass bg-pink-500 - I'm not using this anywhere in my project so it doesn't work. But if I pass bg-yellow-500 it works since I'm using it elsewhere. Any ideas?

[Prathipati Nithish]

Thank you!!
You helped me solve an issue in my react-typescript application built using Vite. The issue I was facing was my tailwind classes are not applied to my storybook components.
The missing piece was the following line in .storybook/preview.ts file,

import "../app/globals.css";

After searching through lot of articles finally I landed on your article and solved the issue. In order for tailwind classes to work we need to import the main CSS file with tailwind directives into preview.ts file in storybook folder.

Once again Thanks!

[Mohamed Amine Terbah]

i had an error
node-modules/acron and acron--jsx not found
So i did :
npm i -D @storybook/addon-styling
npm i acorn acorn-jsx
import the global.css file of your tailwind config in .storybook/preview.js => import "../assets/styles/globals.css"
Restart storybook
and it worked

[juanmlglober]

Thanks! U r smarter than chatgpt, copilot, bard and a few friends

[Alwaisy al-waisy]

Thank you. really helpful.

[hmdegroot]

Another question, unrelated. This EBUSY error happens essentially anytime I change anything. Is this just the norm? Any good solutions using storybook 7 with NextJS?

[Guilherme Xavier]

Im using the exact versions that dont work, if I change the storybook version might work ? which is the best version ?

[SeongKuk Han]

The new solution I updated doesn't work for you? installing postcss, autoprefixer and creating the postcss configuration file

[Kamil Majewski]

not working with:

"storybook": "^8.0.8",
"tailwindcss": "^3.4.1",

[SeongKuk Han]

Thanks for sharing the issue. I have updated the post!