[Next.js] Webpack5 번들링 후 tailwind가 적용되지 않는 문제 해결

디자인시스템을 만드는 팀 프로젝트를 진행 중 우리가 만든 컴포넌트들을 npm 패키지로 배포해야 했다.

처음에는 Rollup으로 시도했다가 이건 뭔가 아닌 것 같다는 판단이 들었다.

왜냐하면 Next.js는 Vite와 달리 Rollup 번들러가 아니라 Webpack 번들러를 사용하기 때문이다.

팀원과 함께 Webpack으로 번들링하는데는 성공했지만 tailwind 스타일링이 적용되지 않는 문제가 발생했다.

 

배포한 npm 패키지를 설치하고 Toast 컴포넌트를 적용시켰을 때 div에는 tailwindcss가 잘 적용된 것 처럼 나온다.

하지만 결과는 제대로 나오지 않고 폰트 크기만 적용되어서 나오는 문제가 발생했다.

 

구글링을 해도 검색이 잘 되지 않아 영문으로 검색하니 동일한 문제를 겪은 사람들이 있었다.

https://github.com/tailwindlabs/tailwindcss/discussions/8521

Tailwind Not Working in Production Mode with Next.js Build · tailwindlabs/tailwindcss · Discussion #8521

 

Next.js에서 build를 진행 하고 production 모드에서 tailwind가 제대로 적용되지 않는 문제였다.

나 또한 build를 할 때 production 모드로 설정해놨기에 이 글을 따라가다보면 해결 할 수 있을 것이라고 생각했다.

 

 

1. tailwind.config.js에 important: true; 적용시키기 [실패]

module.exports = {
    important: true,
    ....
}

이 방법으로 해결한 사람 몇몇이 있어서 같이 작성해본다. 하지만 나는 이 방법으로 해결할 수 없었다.

이것으로 해결하신 분은 요소를 검사할 때 일부 최상위 css가 tailwindcss를 재정의한다는 것을 알고 구성파일에 추가한 것 같았다.

 

2. tailwind.config.js에 tailwind class가 포함된 모든 폴더를 추가하기 [실패]

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layouts/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./stories/**/*.{js,ts,jsx,tsx,mdx}",
  ], 
};

tailwind가 사용되는 모든 폴더를 추가했을 때 잘 작동되는 분이 있었다.

혹시나 하는 마음에 나는 stories 폴더 (스토리북 폴더)까지 추가했지만 작동되지는 않았다.

 

 

3. style 파일 build시킨 후 적용시킬 프로젝트에서 import 시키기 [성공]

가장 밑에 이런 해결책이 있었다.

하나의 해결 방법이 더 있는데 일단 이 방법부터 해봤다.

css파일을 빌드해서 그 파일을 global.css대신 불러오는 방법이었다.

가장 먼저 style파일을 빌드시키는 방법을 찾아야했고 제로초님의 블로그에서 찾을 수 있었다.

 

style-loader, css-loader, postcss-loader를 모두 설치했었고

css파일을 읽고 그 파일들을 style태그로 만들어 head태그 안에 넣어주는 역할을 한다.

하지만 지금은 그 스타일이 적용되지 않고 있었고 그냥 css파일을 만들어주는 방법을 택해야 했다.

mini-css-extract-plugin를 사용하는 방법인데 밑과 같이 설치를 해준다.

npm i -D style-loader css-loader mini-css-extract-plugin

그리고 webpack.congif.js에서 이 플러그인을 불러와 준 후 밑의 코드를 작성한다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

{
  module: {
    rules: [{
    }, {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
    }],
  },
  plugins: [
    // 기타 플러그인
    new MiniCssExtractPlugin({ filename: 'style.css' });
  ]
}

 

그리고 build를 해주면 dist 폴더 안에 style.css가 들어가게 된다.

처음에는 이 파일을 어떻게 적용시켜야 할 프로젝트에 import를 해와야 할까 고민을 했다.

dist폴더 안에 있는 style.css를 import시키기 위해서는 밑과 같이 불러주어야 했다.

import './[패키지이름]/dist/style.css';

근데 나는 여기서 만족하지 못했다...

패키지이름 다음에 바로 style.css가 오길 원했고 빌드될 때 파일목록들을 보니 이런식으로 구성된다는 것을 알게 되었다.

여기서 든 생각...

그러면 style.css 파일을 밖으로 뺄 수 있을까?에 도달했고 시도해봤다.

style.css파일을 바깥으로 빼고 배포했고 결과적으로 dist폴더를 잡지 않고도 import를 할 수 있었다.

import './[패키지이름]/style.css';

 

4. @apply 사용하기 [테스트 중 → 실패]

이 방법은 global.css에 적용되지 않는 css 스타일을 @apply로 불러와 재정의 해주는 방법이다.

우리가 배포한 패키지를 사용자가 프로젝트에 적용하기에 좀 더 편하도록 제공해야겠다는 목표를 가지고 있었던터라

import를 시키는 방법이 아닌 바로 tailwind 스타일이 적용될 수 있도록 다른 방법을 추가적으로 시도하고 있다.

일단은 style.css를 import 해오는 것으로 1차 해결했지만 이 방법으로 다시 시도해보려고 한다.

 

2023년 8월 6일

시도했을 때, @apply로 적용하는 방법도 실패했다.

결과적으로 가장 바깥쪽에 style.css를 적용해주는 방법이 가장 적절한 것 같다.