index.css

/**
 * START --- TAILWIND GENERATOR EDIT
 *
 * `yarn rw setup tailwind` placed these imports here
 * to inject Tailwind's styles into your CSS.
 * For more information, see: https://tailwindcss.com/docs/installation#add-tailwind-to-your-css
 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/**
 * END --- TAILWIND GENERATOR EDIT
 */

main.js

const path = require('path')
const webpack = require('webpack')

const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-essentials",
    "@storybook/addon-postcss",
    "@storybook/addon-a11y"
  ],
  "webpackFinal": async (config, { configType }) => {
    config.plugins.push(
      new webpack.ProvidePlugin({
        React: 'react'
      })
    )

    config.resolve.plugins.push(
      new TsConfigPathsPlugin()
    )

    return config
  }
}

preview.js

  
import React from 'react'

import { ThemeProvider } from '../src/context/ThemeContext/ThemeContext'
import { DefaultTheme } from '../src/context/ThemeContext/ThemeContext'
import ThemedBody from '../src/components/ThemedBody/ThemedBody'

import './index.css'

export const decorators = [
  (Story, context) => (
    <ThemeProvider
      value={
        context.globals.theme === 'night'
          ? DefaultTheme.night
          : DefaultTheme.light
      }
    >
      <style>
        {
          '\
        html, body, #root {\
          height: 100%;\
        }\
      '
        }
      </style>
      <ThemedBody>
        <div
          style={{
            padding: context.globals.padding === 'on' ? '1rem' : '0',
            height: '100%',
          }}
        >
          <Story />
        </div>
      </ThemedBody>
    </ThemeProvider>
  ),
]

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: "Toggle between 'light' and 'night' color-modes.",
    defaultValue: 'light',
    toolbar: {
      icon: 'paintbrush',
      items: ['light', 'night'],
    },
  },
  padding: {
    name: 'Padding',
    description: 'Toggle amount of padding surrounding components.',
    defaultValue: 'off',
    toolbar: {
      icon: 'square',
      items: ['on', 'off'],
    },
  },
}


export const parameters = {
  layout: 'fullscreen',
  backgrounds: {
    disable: true,
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
  },
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}