[React] React TS + Tailwindcss + Storybook 시작하기

안녕하세요. 오늘은 React TS(Typescript) + Tailwindcss + Storybook 환경 구축에 대해 알아보고자 합니다.

React Typescript 프로젝트 만들기

먼저, 아래의 코드로 기본인 React Typescript 프로젝트를 생성합니다. (한참을 관련 라이브러리를 설치하네요.)

$ npx create-react-app [프로젝트명] --template=typescript

Tailwindcss 설치

아래와 같이 tailwindcss 를 설치합니다.

$ npm i -D tailwindcss
$ npx tailwindcss init

설치가 완료되었다면, tailwind.config.js 다음과 같이 수정합니다.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,tsx,ts}"],
  ...
}

src/index.css 에 내용을 다음과 같이 수정합니다.

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

Storybook 설치

아래와 같이 Storybook 을 설치합니다. 참고로, 최신의 Storybook을 설치하려면 node 16 이상을 설치하여야 합니다.

$ npx storybook@latest init

Storybook 에서 tailwindcss 를 인식할 수 있도록 .storybook/preview.ts 소스 안에 다음의 코드를 추가합니다.

import '../src/index.css'