Storybook is a brilliant open source tool to develop UI components in isolation for your React or Next js App, etc. With Storybook you can develop and visualise your components even before creating any pages. Not only that, with storybook add-ons you can also interact with them without even changing your source code.

This makes the development process very smooth for bigger teams, especially when developing components and APIs simultaneously. Storybook will also remove any need to go back and forth between developers to understand the structures of UI components.

Back-end developers can look at the story for a component and will understand all the intricacies of that component. They can also modify it to their requirements if needs be.

TL:DR

Go to GitHub, clone the repo.

teamxenox/storybook-with-next-and-tailwind

Contribute to teamxenox/storybook-with-next-and-tailwind development by creating an account on GitHub.

GitHubteamxenox

So let us begin to implement storybook in a next js project with tailwind CSS. If you want to know more about tailwind CSS, read my article here.

Should you use Tailwind CSS in 2021?

A utility-first CSS framework provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

XenoXRehan Alam

Create Next App and add storybook

First let us create a next js app

npx create-next-app my-storybook

We will now install storybook in our next js project:-

npx sb init

This command will install the storybook in your project. After installation you will have the following folders in your project:-

.storybook (contains main and preview.js files)
stories (contains demo stories and a guide)

See storybook in action

yarn storybook

If you run this command now, you will see the following window opens at localhost:6006.

There will be some basic introduction and some example stories. Now we're going to delete this stories folder and will write our stories in the component itself.

Installing tailwind CSS

Before we write stories let us first add Tailwind CSS in our project, this can be done by following this article on their website. Make sure to use this line for installation as storybook is not yet compatible with latest versions.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

After installing Tailwind we have to setup our storybook for tailwind. The following changes are to be made in

main.js:-

module.exports = {
  stories: [
    // Paths to the story files
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    });

    return config;
  }
};

Preview.js:-

import '../styles/globals.scss'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

Writing first story

With all things set up, let us now write our first story. If you look closely at the main.js file, we have configured it to look for stories in our components folder. That is the most practical place to put all your stories, that is with your components. To know more about Component Driven Development, visit https://www.componentdriven.org//.

components/Button/index.js

const Button = ({size, children}) => {
    return( <button className={` bg-red-400 font-bold text-white px-6 py-2 ${size} `}>
        {children}
    </button>)
}

export default Button;

components/Button/button.stories.js

import Button from './index'; //importing the button component

export default {
    title: "My First Button" //title for our storybook
}

const Template = arguments_ => <Button {...arguments_} /> //creating a template

export const Primary = Template.bind({})

//Passing the props to the component

Primary.args ={     
    size: "h-10 w-56",
    children: "Primary Button"
}

//these arguments will later be the control on the storybook UI and you can change them in the storybook without coming back to the editor.

If everything goes well, you will see this story on the localhost:6006. If not, make sure you haven't made any typo and follows all the steps correctly. If the styles are not applied properly, make sure to run the command mentioned above for tailwind installation.

In the footer, you can see the controls section, where you can see two keys, size and children as we have specified in our story. You can change the values here and see the code in the docs tab. See below:-

That's it folks. That is the implementation of storybook in Next js project with tailwind CSS.

Also, we next week I will write about how to add Next Image support to the storybook, so stay tuned..

Project Repo: https://github.com/relativelyrehan/storybook-with-next-and-tailwind