Set up Storybook with Next.js project and Tailwind
Tags: nextjs, storybook, webdev, react
Published: 2023-04-08 20:19:32

> 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.

```bash
npx create-next-app@latest --typescript
```

![next js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71gs247ahaojyi4pfuqd.png)

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.

```bash
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`.

```typescript
/** @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.

```bash
npm run storybook
```

![storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3xgt0awvd4gvafndkcb.png)

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

![button source code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h6hsrghklo3kngs4a0n.png)

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

![tailwind not working in storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eicq7kk5w5grcs2bz596.png)

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

```typescript
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`.

```typescript
@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));
} */
```

![tailwind with storybook works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrhz093o5fze4bwxdclv.png)


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`.

```properties
mv postcss.config.mjs postcss.config.js
```

2\. Change export code as common js style

```javascript
/** @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 !