사건 발생 코드

tailwindcss에서 변수로 값을 주입해서 사용할 시에 storybook에서 적용되지 않는 문제가 있었다.

./components/Picker.tsx

import { FontVariantsClassName, Palette, PickerSize } from '@constants/styles';
import { Button } from '@nextui-org/react';
import { useEffect, useState } from 'react';
import { ColorTypes, FontVariantsKeys, PickerSizeTypes } from 'types/styles';

type PickerProps = {
  text: string;
  size?: PickerSizeTypes;
  fontVariant?: FontVariantsKeys;
  fontColor?: ColorTypes;
  bgColor?: ColorTypes;
  borderColor?: ColorTypes;
};

const Picker = ({
  text,
  size = 'md',
  fontVariant = 'header03',
  fontColor = 'gray07',
  bgColor = 'gray01',
  borderColor = 'danger01',
}: PickerProps) => {
  const [isFocused, setIsFocused] = useState(false);
  const handleFocus = () => setIsFocused(true);

  useEffect(() => {
    let focusTimeout: NodeJS.Timeout;
    if (isFocused) focusTimeout = setTimeout(() => setIsFocused(false), 500);
    return () => clearTimeout(focusTimeout);
  }, [isFocused]);

  return (
    <Button
      className={`
      ${PickerSize[size]}
      ${FontVariantsClassName[fontVariant]}
      text-[${Palette[fontColor]}]
      border-2
      border-[${Palette[borderColor]}] 
      focus:bg-opacity-20
      ${
        isFocused
          ? 'focus:bg-secondary-orange focus:border-secondary-orange focus:text-secondary-orange'
          : ''
      }
    `}
      color="primary"
      onClick={handleFocus}
    >
      {text}
    </Button>
  );
};

export default Picker;

./stories/Picker.stories.tsx

	import Picker from '@components/common/molecule/Picker';
import { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof Picker> = {
  title: 'Picker',
  component: Picker,
};
export default meta;

type Story = StoryObj<typeof Picker>;

export const Default: Story = {
  args: {
    size: 'md',
    text: 'Hello',
  },
};

storybook과 tailwindcss 연결

Storybook 연결 tailwindcss
위의 링크의 안내에 따라 tailwindcss와 storybook을 연결한다.

하지만 다음과 같이 tailwindcss를 작성할 경우 storybook에서 Controls에서 args 값을 수정해도 변경되지 않는 현상이 있었다.

<div className="border-[${Palette[borderColor]}]"></div>

문제 원인

tailwindcss는 zero-runtime 라이브러리이기 때문에 생긴 에러였다.
어떤 파일에서도 사용하지 않는 클래스는 tailwindcss가 빌드타임에 class를 생성해주지 않는데, 위와 같이 변수식으로 작성하면 빌드타임에 tailwindcss를 생성하지 못해서 에러가 발생했다.

해결 방법

// temp.tsx
export const TRASH_COLORS = `
  border-[#FFEEE5]
  border-[#FFD6C2]
  border-[#FFB48F]
  border-[#FF925C]
  border-[#FF7733]
  border-[#E9570C]
  border-[#A39EFF]
  border-[#FF92FC] 
  border-[#FF6E22]
  border-[#FFC31D]
  border-[#FFFFFF]
  border-[#F6F7F8]
  border-[#E3E6E8]
  border-[#C7CCD1]
  border-[#8F99A3]
  border-[#67737E]
  border-[#505962]
  border-[#394046]
  border-[#22262A]
  border-[#000000]
  border-[#FF7474]
  border-[#A64141]
`;

// index.tsx
import 'constants/trash.ts';

위와 같이 문자열을 선언하여 index.tsx에서 빌드타임에 해당 string을 읽게 하여 해결했다.

궁금한 점

• tailwindcss는 빌드타임에 클래스를 생성해야 해서, 이렇게 작성하는게 잘못된 것인가?에 대해 고민해 봐야겠다고 생각했다..