Next.js + Typescript + Tailwind + Storybook configuration

By [email protected] 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”)

16.15.0

Open tailwind.config.js and set content like this

module.exports = {
 content: [
   "./pages/**/*.{ts,tsx}"
 ],
 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: [
   "./pages/**/*.{ts,tsx}",
   "./stories/**/*.{ts,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

Configure Storybook for postcss

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

module.exports = {
 "stories": [
   "../stories/**/*.stories.@(js|jsx|ts|tsx)"
 ],
 "addons": [
   "@storybook/addon-links",
   "@storybook/addon-essentials",
   "@storybook/addon-interactions",
   // 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',
 backgroundColor,
 label,
 ...props
}: ButtonProps) => {
 const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 return (
   <button
     type="button"
     className={['bg-yellow-500', `storybook-button--${size}`].join(' ')}
     style={{ backgroundColor }}
     {...props}
   >
     {label}
   </button>
 );
};

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

Run Storybook

npm run storybook

---

Share

---