[Storybook] Next.js 14.2.5 기반 Storybook에 Tailwind CSS 통합하기

1. 사전 준비

1. create-next-app 을 사용한 Next.js 앱 만들기

   npx create-next-app@latest

   • 설치 중 프롬프트에서 Would you like to use Tailwind CSS? No / Yes 부분은 Yes로 선택한다.

2. 프로젝트 폴더로 이동 후 Storybook 설치하기

   cd /프로젝트 이름
   npx storybook@latest init

2. PostCSS 설정

PostCSS
Javascript를 사용하여 CSS를 변환하는 도구입니다. PostCSS가 제공하는 다양한 플러그인들을 활용하여 CSS를 전처리 및 후처리하고 브라우저에서 사용할 수 있는 형태의 CSS 파일을 생성할 수 있습니다. Tailwind에서는 Tailwind의 유틸리티 클래스들을 PostCSS를 사용하여 생성하고 최적화합니다.

Tailwind가 PostCSS를 사용해 CSS를 컴파일하기 때문에 @storybook/addon-styling-webpack을 설치해야 합니다.

Next.js에서는 이미 PostCSS와 통합되어 있기 때문에 이 단계를 건너 뛰어도 됩니다!

3. 스토리에 Tailwind 불러오기

/.storybook/preview.ts 파일에서/src/app/globals.css 파일을 불러옵니다.

import "../src/app/globals.css";

/.storybook/preview.ts
: Storybook의 프레임워크와 스토리들이 어떻게 렌더링되는지를 설정하는 파일 / 전역적으로 적용할 설정, 추가할 데코레이터, 글로벌 파라미터 등을 정의할 수 있음
/.storybook/main.ts
: Storybook의 메인 설정 파일 / Storybook이 읽어들일 스토리 파일의 위치, 추가할 애드온, 웹팩 설정 등을 정의할 수 있음

이 때 globals.css 내에는 다음과 같이 Tailwind CSS의 주요 기능을 활성화하는 코드가 포함되어 있어야 합니다.

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

@tailwind base;
: 브라우저 간의 스타일 차이를 줄이고, 기본적인 스타일링을 설정하는 CSS 규칙
@tailwind components;
: Tailwind CSS의 컴포넌트 레벨 스타일들을 포함 / 주로 재사용 가능한 스타일링을 정의하는 데 사용
@tailwind utilities;
: 단일 목적을 가진 CSS 클래스로, 작은 스타일링 단위를 제공 / 클래스명을 통해 직접 스타일을 적용하는 데 사용

4. Tailwind CSS 적용 경로 설정

create-next-app을 통해 프로젝트를 만들었다면 tailwind.config.ts 코드는 아래와 같다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

여기에서 /src/stories 내에 있는 컴포넌트 파일들을 Tailwind에서 인식할 수 있도록 content 프로퍼티를 수정해 줘야 한다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

모든 경로를 지우고 ./src/**/*.{js,ts,jsx,tsx,mdx} 이렇게만 설정해 줘도 된다.