Post

Storybook을 사용해보자(2) - tailwind 적용하기

Posted Updated
By saemii 3 min read

📌상황

최근에 꾸준히 공부하고 있는 Vitest와 Storybook을 실제 작업물에 적용시켜보는 프로젝트를 진행중이다. 간단한 컴포넌트 부터 Storybook을 작성하고, npm run storybook을 통해 확인해보니, Tailwind가 적용되지 않는다는 문제가 발견됐다.

라이브러리들이 설치된 상황은 다음과 같다.

  1. Next.js + Tailwind 초기에 설치
  2. Storybook, Vitest는 이후 설치

Vitest의 경우 Next.js를 시작할 때 함께 설치하는 방식도 있지만, 개인적으로는 내가 사용하는 폴더 구조에 맞게 변경하는 작업이 추가적으로 필요해서 따로 설치하는 걸 선호해서 각각 설치해주었다.

✅해결 방법

빠르게 해결방법만 보면 추가적으로 설치한 라이브러리는 아래와 같다.

1
2

npm install -D @storybook/addon-postcss
npm install autoprefixer

스택 오버플로우 참고해서 진행해보자!

➡️postcss.config.mjs

위에 작성된 라이브러리를 설치하고,postcss.config.mjs 에 아래와 같이 plugins를 추가한다.

1
2
3
4
5
6
7
8
9

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

export default config

➡️.storybook/main.ts

다음은 스토리북의 기본 설정 파일인 main.ts 파일에 아래와 같은 설정을 추가로 작성해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import type { StorybookConfig } from "@storybook/nextjs"

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    //생략
    "@storybook/addon-postcss",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {
      cssLoaderOptions: {
        importLoaders: 1,
      },
      postcssLoaderOptions: {
        implementation: require("postcss"),
      },
    },
  },
}
export default config

➡️.storybook/preview.ts

마지막으로 Storybook의 미리보기 환경을 설정하는 preview.ts파일에 @tailwind 설정들이 포함되어 있는 css 파일을 불러와준다.

나는 globals.css에 아래와 같은 tailwind의 css 파일을 불러오고, src 폴더를 사용하므로 다음과 같이 작성해주었다.

1
2
3

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import type { Preview } from "@storybook/react"
import "../src/app/globals.css"

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
}

export default preview

이제 다시 npm run storybook을 실행해보면 tailwind가 적용된 미리보기 화면을 확인할 수 있다.

🗂️참고 사이트

Storybook
Storybook Next.js TailwindCSS
This post is licensed under CC BY 4.0 by the author.