Gatsby, TailwindCSS, Storybook configuration

.storybook

- addons.js
- config.js
- webpack.config.js

addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

config.js

import { configure } from '@storybook/react'
import { action } from '@storybook/addon-actions'

// this is required, otherwise storybook won't properly load tailwind
import '../src/components/layout.css'

// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /\.stories\.js$/), module)

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {}
}
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = ''
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
  action('NavigateTo:')(pathname)
}

layout.css

// found in src/components

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

webpack.config.js

const path = require('path')

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.css$/,
    use: [
      // Loader for webpack to process CSS with PostCSS
      {
        loader: 'postcss-loader',
        options: {
          /*
                Enable Source Maps
               */
          sourceMap: true,
          /*
                Set postcss.config.js config path && ctx
               */
          config: {
            path: './.storybook/'
          }
        }
      }
    ],

    include: path.resolve(__dirname, '../')
  })
  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  config.module.rules[0].use[0].loader = require.resolve('babel-loader')

  // use @babel/preset-react for JSX and env (instead of staged presets)
  config.module.rules[0].use[0].options.presets = [
    require.resolve('@babel/preset-react'),
    require.resolve('@babel/preset-env')
  ]

  config.module.rules[0].use[0].options.plugins = [
    // use @babel/plugin-proposal-class-properties for class arrow functions
    require.resolve('@babel/plugin-proposal-class-properties'),
    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
    require.resolve('babel-plugin-remove-graphql-queries')
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  config.resolve.mainFields = ['browser', 'module', 'main']

  return config
}

Stories should be stored within a src/components/stories folder (or any other nested state, since config files will recursively scan and resolve) or simply outside of the stories folder that is auto-generated by sb init.

More info at the Gatsby docs.

Blog posts here!
https://medium.com/@romansorin/integrating-gatsby-tailwind-and-storybook-90b4f76d0fc7
https://dev.to/romansorin/integrating-gatsby-tailwind-and-storybook-2cbi