Nextjs + TailwindCSS + Storybook

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

Install Tailwind CSS with Next.js

Install Tailwind CSS with Next.js - Tailwind CSS

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

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

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

Classes used in our project are in that file

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

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({})

Comments

[Code of Relevancy]

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