DEV Community

Jonathan Ruiz
Jonathan Ruiz

Posted on

Nextjs + TailwindCSS + Storybook

Create a nextjs project.

Using Javascript you can use:

npx create-next-app@latest
# or
yarn create next-app
Enter fullscreen mode Exit fullscreen mode

Using Typescript you can use:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
Enter fullscreen mode Exit fullscreen mode

I'll use this options
create-next-app options selected

Install Tailwind CSS with Next.js

Install Tailwind CSS with Next.js - Tailwind CSS

Setting up Tailwind CSS in a Next.js v10+ project.

favicon tailwindcss.com

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>
    </>
  )
}

Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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

Classes used in our project are in that file
classes used in our project

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
Enter fullscreen mode Exit fullscreen mode

Storybook installed
Storybook installed
Now try storybook running the script

yarn storybook
Enter fullscreen mode Exit fullscreen mode

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$/
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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: []
}

Enter fullscreen mode Exit fullscreen mode

Adding a storybook script

"scripts": {
  "watch:storybook": "start-storybook dev -p 6006"
},
Enter fullscreen mode Exit fullscreen mode

Now let's run both script

yarn watch:css
Enter fullscreen mode Exit fullscreen mode

Now, open another terminal and run

yarn watch:storybook
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  )
}

Enter fullscreen mode Exit fullscreen mode

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({})
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Great article.
The combination of Nextjs, TailwindCSS and Storybook is truly impressive.. and TypeScript as well..