Rails에서 Tailwind CSS v2.0 사용

최근 Tailwind CSS 뒤에 있는 사람들이 v2.0을 출시했습니다 🎉🎉
(그게 2020년 11월인데, 2020년에도 시간이 있었다니?!)

체크아웃 release notes

그러나 안타깝게도 Rails 프로젝트에 추가하려고 하면 Webpack에서 다음 오류가 발생합니다(프로젝트에 이미 설정@rails/webpacker이 있다고 가정합니다):

Error: PostCSS plugin tailwindcss requires PostCSS 8.

오류 메시지는 단순히 Tailwind v2가 PostCSS 8에 의존하지만 현재 웹패커 빌드는 PostCSS 7을 사용한다고 말하고 있습니다. 이 문제를 해결하기 위해 다음 두 가지 접근 방식 중 하나를 사용할 수 있습니다.

쉬운 방법

글쎄요, Tailwind 메인테이너는 PostCSS 8 자체가 최신 릴리스이기 때문에 Rails와 같은 인기 있는 프레임워크에서 그다지 널리 지원되지 않는다는 사실을 깨달았습니다. 그래서 그들은 친절하게 당분간 PostCSS 7 compatible build을 출시했습니다.

당신이해야 할 일은

yarn remove tailwindcss
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat

...와 완료!!

호환성 빌드는 "일반"빌드의 모든 기능을 지원합니다. 대박! 그러나 하나의 캐치를 제외하고 :

적당한 크기의 프로젝트를 진행하고 있다면 애플리케이션의 Rails 버전이 곧 업그레이드될 가능성은 낮을 수 있습니다. 그리고 Tailwind의 후속 릴리스에는 호환성 빌드가 제공되지 않을 가능성이 있습니다. 그래서 우리는 무엇을 해야 합니까?

(not-so) 어려운 방법

음, Rails 앱에서 PostCSS 버전을 범프할 수 있다면 더 좋지 않을까요? 그렇게 하면 호환성 빌드에 의존하거나 걱정할 필요가 없습니다.
해보자

yarn add tailwindcss@^2.0.2 postcss@^8.2.4
./bin/webpack-dev-server

흠, 같은 오류 메시지? 오 예, postcss-loader도 업그레이드해야 합니다.

yarn add postcss-loader@^4.2.0
./bin/webpack-dev-server

또 다른 오류 메시지!!

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'config'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }

여기서 webpack은 postcss-loader가 잘못된 옵션config으로 초기화되었다고 불평합니다. 이전 버전의 로더에서는 config가 PostCSS 구성 옵션을 전달하는 데 사용되었습니다. 위의 오류 메시지에서 아마도 postcssOptions로 이름이 변경되었음을 짐작할 수 있습니다. "당장! 지금 webpack 구성을 편집해야 합니다!"내 반응이었지만 그렇게 어렵지는 않은 것으로 밝혀졌습니다.config/webpack/environment.js 파일의 내용을 보면 다음과 같이 표시됩니다.

const { environment } = require('@rails/webpacker')

module.exports = environment

각 파일 유형(css, sass, moduleCss 등)에 대한 postcss-loader 옵션에서 config 키를 제거하도록 변경합니다.

const { environment } = require("@rails/webpacker");

environment.loaders
  .map((rule) => rule.value.use)
  .flat()
  .filter(({ loader }) => loader === "postcss-loader")
  .forEach((item) => {
    if (item.options) {
      item.options.postcssOptions = { from: item.options.config.path };
      delete item.options.config;
    }
  });

module.exports = environment;

완료!! 이제 webpack은 번들을 잘 컴파일해야 합니다.