Create a production-ready storybook with tailwind

Hello everyone, I recently experienced a lot of pain trying to use tailwind, nextjs and storybook for a project. It took a lot of work (and time) to finally get it to work in production, so I thought I'd share a few tips.

If you have used tailwind, you probably know it uses postcss, which allows for things like treeshaking. Now, I'd used tailwind loads, but I'd usually just followed the installation docs, and left it at that. Anyway, let me show you how I did it.

First, I ran yarn create next-app, to bootstrap a nextjs project. Then I installed tailwind by running yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest. I know nextjs already has postcss, but I install it anyway, to ensure it's up to date. I didn't use the pages directory for this project, so you can clean out all the files in there. You now have a nextjs app with tailwind.

It's a good moment to add your tailwind config, so run npx tailwindcss init -p to create a tailwind.config.js and a postcss.config.js. Now let's run npx sb init to create a storybook. Now run yarn add @storybook/addon-postcss and add

// .storybook/main.js
{
  name: '@storybook/addon-postcss',
  options: {
    postcssLoaderOptions: {
      implementation: require('postcss'),
    },
  },
},

to your .storybook/main.js file. The .storybook/main.js should now look something like this:

// .storybook/main.js
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },
  ]
}

Now head to stories/assets and create a globals.css file with the following:

/* stories/assets/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Add any custom styles above the @tailwind rules. To import your css in dvelopment, add import '../stories/assets/globals.css' to your .storybook/preview.js file. Now, to import your treeshaken css in production, create a file called .storybook/preview-head.html and populate it with:

<!-- .storybook/preview-head.html !-->
<link rel="stylesheet" href="./app.css" />

Now install postcss-cli by running yarn add postcss-cli. Now replace the scripts section of your package.json file with this:

"scripts": {
    "dev": "next dev",
    "build": "yarn build-css && yarn build-storybook",
    "start": "next start",
    "storybook": "start-storybook -s ./stories/assets -p 6006",
    "build-css": "postcss ./stories/assets/globals.css -o ./stories/assets/app.css",
    "build-storybook": "build-storybook -s ./stories/assets"
  },

Congratulations! You now have a tailwindcss storybook. You can now use Chromatic or a static hosting company to deploy your app. If you use Vercel, I'll show you how to deploy.

Import your repo, and then ensure you have setup your commands like this:

Now you are actually done :). Thanks for reading, that was my first article on dev.to! Please follow me on github and let me know in the comments what thought!