3. NextJS, Storybook에Tailwindcss를 추가하자.

Sal Jeong·2022년 7월 22일

ToyProject NextJS로 포트폴리오 만들기

목록 보기

4/6

지난 글에서 NextJS가 윈도우에서 돌아가도록 만들었다.

Tailwindcss 도입하자.

CSS 라이브러리는 Tailwindcss를 사용하기로 결정했는데,
저번에 언급한 MUI가 아닌 이유는 스토리북을 사용하게 되면, 결국 모든 컴포넌트를 Stories에 몰아넣는 과정을 거쳐야 하는데, 디자이너분과 협업을 한다고 생각해보면, MUI보다 스토리북으로 완성된 컴포넌트를 확인하고 빠르게빠르게 수정하는데 역시 inline classes를 건드리는게 더 빠를 것 같다고 생각했기 때문이다.

https://tailwindcss.com/docs/guides/nextjs

Tailwindcss에 대해서는 NextJS와 Storybook에 연동하는 방법을 찾기 위하여
https://theodorusclarence.com/blog/nextjs-storybook-tailwind
도 참고했다.

1. 디펜던시 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

먼저 Tailwind와 함께 postcss와 autoprefixer를 같이 설치한다.

https://stackshare.io/stackups/autoprefixer-vs-postcss

postcss는 NextJS 프로젝트가 빌드되는 과정에서 CSS를 JS 번들에 추가시켜 주고, 이를 파싱하여 주는 것이 autoprefixer이다.

2. tailwind.config 설정

//tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // Storybook의 Story 위치를 src 폴더로 정했으므로, 아래 규칙을 하나 더합니다.
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    // 아래 링크에 대한 설명에 따라서, 미디어쿼리 규칙을 여기에도 설정합니다.
    screens: {
          mob: "375px",
          tablet: "768px",
          laptop: "1024px",
          laptopl: "1440px",
          desktop: "1280px",
      },
    extend: {},
  },
  plugins: [],
}

그리고 페이지의 안내에 따라, tailwind.config.js를 설정해 주는데,

https://tailwindcss.com/docs/theme
에 따라 두 가지 추가해 주었다.

3. globals.css 설정

// ./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

에 @tailwind를 css 파일에 임포트 해주었다.

이와 같은 방법으로 문제없이 Tailwinds의 기능을 추가할 수 있었다.

            <Popover className="block tablet:hidden mt-5">
                {({ open }) => (
                    <>
            // className에 지정된 Tailwindcss의 directives들이 제대로 적용되는 것을 확인 가능했다.
			...
};

다만 문제는 Storybook과 Tailwinds를 통합하는 과정이었다.

3. TroubleShoot

https://theodorusclarence.com/blog/nextjs-storybook-tailwind#adding-webpack-as-a-resolution-dependency

yarn add -D @storybook/addon-postcss@2.0.0

우선, storybook에서도 tailwinds의 css 가져올 수 있도록 위 디펜던시를 설치했다.

위 링크에서는 postcss 신버전이 나오기 전이라 그냥 설치한 것 같지만, 위 최신 alpha 버전을 설치 시 빌드자체가 되지 않았으므로 github 이슈를 참고해서 2.0.0으로 설치하였다.

//.storybook/main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  /** Expose public folder to storybook as static */
  staticDir: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       */
       //postcss를 활용할 수 있도록 이 부분 추가.
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  // webpack5를 사용할 수 있도록 이 부분 추가
  core: {
    builder: 'webpack5',
  },

또한, 'Module not found: Error: Can't resolve 'util' in webpack'
에러가 표시되었기에

yarn add -d util

도 추가해 주었다.

//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // Next 11버전부터는 Webpack config를 next.config에 묶어서
  // 사용할수 있다고 한다.
  webpack: {
    resolve: {
      fallback: {
        util: require.resolve("util/")
      }
  }
  }
}





module.exports = nextConfig