storybook v7 で tailwind を使えるようにする

yarn add -D @storybook/addon-styling

node node_modules/@storybook/addon-styling/bin/postinstall.js

=========================================

 🧰 Configuring @storybook/addon-styling

=========================================

(1/3) Project summary
  • Built with webpack
  • Styled with tailwind

(2/3) .storybook/main.ts
  • Registering @storybook/addon-styling.
    • Configuring postcss.

(3/3) .storybook/preview.tsx
  • Adding import for withThemeByClassName decorator
  • Adding import for stylesheet
  • Adding withThemeByClassName decorator to config

✨ Done

const config: StorybookConfig = {
  framework: '@storybook/react-webpack5',
  stories: ['../src/**/stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: {
+          implementation: require.resolve('postcss'),
+        },
+     },
+   },
  ],
  docs: {
    autodocs: 'tag',
  }
};

export default config;

import { Preview } from '@storybook/react';
import React from 'react';

+import { withThemeByClassName } from '@storybook/addon-styling';
+
+/* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
+import '../src/index.css';


const preview: Preview = {
  decorators: [
    // Adds theme switching support.
    // NOTE: requires setting "darkMode" to "class" in your tailwind config
+   withThemeByClassName({
+     themes: {
+       light: 'light',
+       dark: 'dark',
+     },
+     defaultTheme: 'light',
+   }),
  ],
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    layout: 'fullscreen',
  },
};

export default preview;