tailwindCSS Storybook

Storybook 설치
.<App Name>

$ npx sb init

tailwindCSS Setup
.<App Name> .storybook preview.js

import "../src/index.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

사용 예시 (Box)
.<App Name> src stories Box.tsx

import React from "react";
/**
 * 기존 Component 만들듯이 만들기
 */
export interface BoxProps {
  bgColor: string;
}

export const Box = ({ bgColor }: BoxProps) => {
  return <div className={`bg-${bgColor}-500 w-40 h-40`}></div>;
};

.<App Name> src stories Box.stories.tsx

import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Box } from "./Box";

export default {
  title: "Component/Box",
  component: Box,
  argTypes: {
    bgColor: { control: "color" },
  },
} as ComponentMeta<typeof Box>;

const Template: ComponentStory<typeof Box> = (args) => {
  const { bgColor } = args;
  return <Box bgColor={bgColor} />;
};

export const PinkBox = Template.bind({});
PinkBox.args = {
  bgColor: "pink",
};

export const LimeBox = Template.bind({});
LimeBox.args = {
  bgColor: "lime",
};

결과화면

Reference

ahn0min.log 2022.11.6.(일) 스토리 작성하기(Storybook, TailwindCSS)