Next.js + Typescript + TailwindCSS + Storybook

README.md

Next.js + Typescript + TailwindCSS + Storybook configuration

This is no definitive or ultimate guide, just my preferred way to do this

Versions at the time of writing

• Nodejs v14.17.3
• Typescript v4.5.4
• Next.js v12.0.7
• React v17.0.2
• TailwindCSS v3.0.7
• Storybook v6.4.9
• Postcss v8.4.4

I prefer to use yarn to manage my projects

Step 1: Create nextjs project with tailwind support

To create the project already configured with tailwindcss support

yarn create next-app -e with-tailwindcss

answer the project name prompt and wait for it to finish

Step 2: Add typescript

Typescript + Next.js = ♥

create an empty tsconfig.json file in the root of the project we crated on step 1

touch tsconfig.json

then install typescript and types for node and react

yarn add -D typescript @types/node @types/react

rename all component and page files with .js extension to .ts_ or better yet to .tsx

finally run the next dev server for it to populate your tsconfig and configure the project for typescript

yarn dev

(optional but highly recommended)

enable strict mode in tsconfig.json by changing strict key to true

Step 3: Add storybook

Here will use npx to run sb, haven't found a way to do this directly with yarn without installing sb itself to the project

npx sb init --builder webpack5

this will add storybook support to the project and create example components and stories under stories directory, now we will add postcss support to enable tailwindcss in the storybook

yarn add -D @storybook/addon-postcss

then open .storybook/main.js and add the postcss addon to the addons list

/* rest of addons list */
{
  name: "@storybook/addon-postcss",
  options: {
    postcssLoaderOptions: {
      implementation: require("postcss"),
    },
  },
}

also add resolutions to package.json

"resolutions": {
  "webpack": "^5"
}

now at the top of .storybook/preview.js import globals.css

import "../styles/globals.css";

it is very importante that you configure the directories where your pages and components will live in tailwind.config.js if you want to use the examples created add the following line to the content list in tailwind.config.js

"./stories/**/*.{js,ts,jsx,tsx}",

NOTE: It took me more time to realize this than I'm proud to admit

I also use alias imports so, just in case it still does not work out of the box I add this to .storybook/main.js after core key

webpackFinal: (config) => {
    /**
     * Add support for alias-imports
     * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
     */
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
    };

    /**
     * Fixes font import with /
     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
     */
    config.resolve.roots = [
      path.resolve(__dirname, '../public'),
      'node_modules',
    ];

    return config;
  }

Step 4: Develop

At this point you should have a working next.js project with typescript, tailwindcss and storybook. Creating your first story and/or component is way out of the scope of this guide. You can find next possible steps in Storybook tutorials

Bonus

If you find the storybook UI eye burning or you just enjoy dark mode install storybook-dark-mode and add it to addons in .storybook/main.js