Nextjs + TailwindCSS + Storybook
Tags: setup, nextjs, tailwindcss, storybook
Published: 2023-02-07 22:53:55

## Create a nextjs project.

Using **Javascript** you can use:

```
npx create-next-app@latest
# or
yarn create next-app
```

Using **Typescript** you can use:

```
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
```
I'll use this options
![create-next-app options selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/256h7g4gbjpqu80n4x03.png)


## Install Tailwind CSS with Next.js
{% embed https://tailwindcss.com/docs/guides/nextjs %}

## Trying TailwindCSS and adding a script

I'll try Tailwind CSS modifying the file `pages/index.tsx`

```
export default function Home() {
  return (
    <>
      <h1 className='text-red-900 text-9xl'>hola</h1>
    </>
  )
}

```

Now let's add the following script in the `package.json` file

```
"scripts": {
    "watch:css": "npx tailwindcss -i ./styles/globals.css -o ./public/tailwind.css --watch"
  }
```
This script will create file with only the clases that we used in our project. Also it will watch pending for new changes in the classes of our project.

Let's run the script
`yarn watch:css`

File added by the script
![File added by the script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d6q52fdbo5mqz8gf359.png)

Classes used in our project are in that file
![classes used in our project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7prdjp10sywcx8vnab7l.png)

## Installing and trying storybook
Before to install storybook we need to rename the `.eslintrc.json` to `.eslintrc` to avoid conflict with migrating when storybook is installing.

Now, let's install storybook
```
npx sb init
```
Storybook installed
![Storybook installed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy6uo0rfqt95r89z0gvk.png)
Now try storybook running the script

```
yarn storybook
```
If show an error in the file `tsconfig.json` close and open vscode

## Configuring storybook with tailwind
Open the file `.storybook/preview.js` and import the file created by the tailwindcss script

It should looks like this
```
import('../public/tailwind.css')

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  }
}
```
Now must to tell tailwind to compile the files in the folder stories
Open the file `tailwind.config.js` and add the path `'./stories/*.{js,ts,jsx,tsx}'`
It should looks like this

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './stories/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

```

## Adding a storybook script

```
"scripts": {
  "watch:storybook": "start-storybook dev -p 6006"
},
```

## Now let's run both script

```
yarn watch:css
```
Now, open another terminal and run
```
yarn watch:storybook
```

## Creating a component and a story

Let's create a component in the path `./stories/AnotherButton.tsx`

```
interface Props {}

export function AnotherButton(props: Props) {
  return (
    <>
      <button className='p-8 text-lg text-white rounded-3xl bg-slate-700'>
        AnotherButton
      </button>
    </>
  )
}

```
Let's create a story for that component in `./stories/AnotherButton.stories.tsx`
```
import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'

import { AnotherButton } from './AnotherButton'

export default {
  title: 'tailwind/AnotherButton',
  component: AnotherButton
} as ComponentMeta<typeof AnotherButton>

const Template: ComponentStory<typeof AnotherButton> = (args) => (
  <AnotherButton {...args} />
)

export const Primary = Template.bind({})
```