Darcy Paterson Blog Next.js + Typescript + Tailwind + Storybook configuration

Nextjs, Storybook, typescript, tailwind

Next.js + Typescript + Tailwind + Storybook configuration

By on June 1st, 2022

This is a quick setup for a Storybook project that uses Next.js, Typescript and Tailwind.

In your terminal, add next-js and typescript 

npx create-next-app@latest --typescript <project-name>

Change directory

cd <project-name>

Add Tailwind, PostCSS, Autoprefixer

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Initialize Tailwind and PostCSS 

(The “-p” creates a postCSS config file.)

npx tailwindcss init -p

Add an “.nvmrc” file to your project

Open the file and add your version number of node (example “16.15.0”)


Open tailwind.config.js and set content like this

module.exports = {
 content: [
 theme: {
   extend: {},
 plugins: [],

Open “styles/global.css” and add

@tailwind base;
@tailwind components;
@tailwind utilities;

Add Sass

npm install --save-dev sass

Add Storybook

npx sb init --builder webpack5

Reference the Tailwind css file

Open “.storybook/preview.js” and add 

import '../styles/globals.css'

Update the tailwind.config.js file

Storybook adds a “stories” directory in your project. Add a reference to it in the config like this

module.exports = {
 content: [
 theme: {
   extend: {},
 plugins: [],

Configure Storybook for postcss

Open “.storybook/main.js” and change code like this

module.exports = {
 "stories": [
 "addons": [
   // Add PostCSS into addons for compiling tailwind below
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
   // End PostCSS
 "framework": "@storybook/react",
 "core": {
   "builder": "@storybook/builder-webpack5"

Add the @storybook/addon-postcss

npm install  --save-dev @storybook/addon-postcss

Now you’ll be able to add Tailwind styles to your Storybook components. Test by changing the “stories/Button.tsx” file to include a tailwind style like this (example “bg-yellow-500”)

import React from 'react';
import './button.css';
interface ButtonProps {
  * Is this the principal call to action on the page?
 primary?: boolean;
  * What background color to use
 backgroundColor?: string;
  * How large should the button be?
 size?: 'small' | 'medium' | 'large';
  * Button contents
 label: string;
  * Optional click handler
 onClick?: () => void;
* Primary UI component for user interaction
export const Button = ({
 primary = false,
 size = 'medium',
}: ButtonProps) => {
 const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 return (
     className={['bg-yellow-500', `storybook-button--${size}`].join(' ')}
     style={{ backgroundColor }}

You should see the button background change to yellow after you run storybook. 

Run Storybook

npm run storybook