Connecting Tailwind CSS, NextJS, and Storybook
Tags: nextjs, tailwindcss, storybook, webdev
Published: 2023-06-29 07:14:51

Short summary of how to connect [NextJS](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) and [Storybook](https://storybook.js.org/). 

The connection is showed by making a simple button.

#### Step 1: Create NextJS app
`npx create-next-app --typescript`
If you need detailed steps of creating NextJS app, please check its documentation [here](https://nextjs.org/learn/basics/create-nextjs-app/setup).

#### Step 2: Make a button
You can edit the `src/pages/index.tsx` file for the purpose of testing. We will create a simple button, which can change its background color when clicked. Color is generated randomly, and updated using `state` in React. Thus, add `import {useState} from 'react'` at the top of the file and edit the `Home` function as follows:

```
export default function Home() {
  const [ccolor, setCcolor] = useState<string>("");
  
  function changeColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    setCcolor(randomColor);
  }

  return (
        <div>
          <p> get a random color &#128071;</p>
          <button onClick={changeColor} style ={{backgroundColor: "#" + `${ccolor}`}}> 👏 </button>
        </div>
  )
}
```
You can check the result by running the app (`npm run dev`). Button background color changes when clicked.
![Simple button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq8yf0spt9hvz1xysonn.png)

#### Step 3: Install Tailwind CSS
Now we can add Tailwind CSS by following its [documentation](https://tailwindcss.com/docs/guides/nextjs). 
In the created app folder, install Tailwind CSS.

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
According to your current folder structure, modify the content pathways in the `tailwind.config.js` file.

```
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Add Tailwind CSS directives to the top of your `styles/global.css` file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Try running the app to check if everything is working without errors.

#### Step 4: Add Tailwind CSS to the button

```
import { use, useState } from "react";


export default function Home() {
  const [ccolor, setCcolor] = useState<string>("");
  
  function changeColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    setCcolor(randomColor);
  }

  return (
    <div className="flex flex-col justify-center items-center 
										w-screen h-screen bg-gray-300">
      <p className="font-mono text-xl text-center"> get a random color </p>
        <button className = "rounded-full text-5xl m-4 p-8 shadow-xl" onClick={changeColor} style ={{backgroundColor: "#" + `${ccolor}`}}> 👏 </button>
    </div>
  )
}
```
The code above changes the background color of the page, changes the text properties and makes the button round and shadowed. 

![Button with Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lj3kzsuffm9lkntnr3w.png)

Up to this point, you connected NextJS with Tailwind CSS.

#### Step 5: Install Storybook
In the same folder, install Storybook:
```
npx storybook@latest init
```
And try running it to check if it is working properly: `npm run storybook`

Modify `.storybook/main.js` as follows:
```
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  **staticDirs: ['../public'],**
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    **"@storybook/addon-postcss",**
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;
```

Edit `.storybook/preview.js` by adding this line at the top of the file: 
```
import '../src/styles/globals.css';
```

Now as the folder structure changed, we should edit the content path for `tailwind.config.js` file as well:
```
content: [
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
],
```
#### Step 6: Create story for the button
We want to create a button component, which will have 2 templates: default button and round button. The component has 3 arguments to play with: border radius, background color, and the emoji of the button. 

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

Following the Storybook’s [documentation](https://storybook.js.org/docs/react/writing-stories/introduction), added our button in `Button.tsx` file.
```
import {useState} from 'react';
import './button.css';

interface ButtonProps {
  radius?: number; //border radius
  backgroundColor?: string; //background color
  emoji: 'clap' | 'heart' | 'star'; //emoji on the button
}
const emojiStyles = {
  clap: "👏",
  heart: "💔",
  star: "🌟",
};

export const Button = ({
  radius = 50,
  backgroundColor,
  emoji = 'clap'
}: ButtonProps) => {
//here comes our button
  const [ccolor, setCcolor] = useState<string>("");
  
  const ButtonClass = "text-5xl m-4 p-8 shadow-xl bg-gray-400 ";
  return (
    <button 
      className = {ButtonClass}
      style = {{backgroundColor, borderRadius: radius}}
      >
      {emojiStyles[emoji]}
    </button>
  );
};
```

Also, we create its story in `Button.stories.ts` as follows:

```
import { StoryObj, Meta } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
};

export default meta;

//create a “template” of how args map to rendering (from SB)
type Template = StoryObj<typeof Button>;

//created two variations of the button
export const Default:  Template = {
  args :{
    radius: 50,
    backgroundColor: '#ff8b8b',
    emoji: 'clap'
  },
};


export const Circle: Template = {
  args: {
    radius: 100,
    backgroundColor: 'blue',
    emoji: 'clap'
  },
};
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6c4n34yyz0h15xny2dp.png)

In this simple tutorial we used NextJS with TailwindCSS by utilizing Storybook. The example is very simple and can be further developed. Please feel free to check GitHub repository with this project [here](https://github.com/anapimolodec/simple-button).

Thank you for reading up to this point ✨