문제 상황

필자가 Tailwind + Typescript + React를 사용해서 웹 페이지를 만들던 중 아래와 같은 에러를 마주했다.

이 에러를 해결하는데 5일이 걸렸다. 아무리 봐도 이유를 몰랐기 때문에...
필자가 작성한 코드 파일에서 문제가 생긴게 아닌 것 같기 때문에 더욱 헷갈렸다.
지금도 사실 명확한 이유는 알 수 없다. stackoverflow에서도 같은 에러를 찾기 힘들었다.
다만 어떤 코드의 수정으로 해결이 되었는데, 우선은 그것을 기록해놓고자 한다.

원인

// tailwind.config.js //

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  mode: "jit",
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

필자의 tailwind.config.js 파일에 위와 같은 코드를 작성해놨었다.
에러를 찾기위해서 확인할 수 있는 모든 콘솔을 다 뒤져본 결과...
VSC의 출력란에 이런 에러가 있었다.

theme 부분에서 Syntax Error가 발생!

그 때는 그게 에러일 줄 상상도 못해서 캡쳐를 안해놨는데, 명확하게 확인 가능하므로 캡쳐까지는 필요없다고 생각한다.
분명 공식문서에도 저렇게 사용하는데, 에러가 뜨길래 우선은 아래와 같이 코드를 수정했다.

해결

// tailwind.config.js //

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  mode: "jit",
};

theme 속성을 지우고, 추가적으로, 사용하지 않는 부분을 전부 제거했다.
그렇게 에러가 해결되었다. 너무 허무하게도.
Tailwind 공식 문서를 뒤져본 결과, 그나마 유추할 수 있는게 버전 업데이트가 되면서 무엇인가 config.js를 작성하는 쪽이 바뀐 것 같다.(사실 이것도 시도했는데 에러 해결은 안됐었다...)
우선 지금은 해결이 되었으므로 넘어가지만, 다음부터는 버전 확인을 해서 공식 문서를 따라갈 필요가 있어보인다.(postcss나 기타 라이브러리와의 버전 호환 문제는 아닌 것 같기 때문에)

기타 config.js + package.json

혹시나 나중에 버전 호환 문제로 골치 아플까봐 현재 필자가 사용 중인 관련 라이브러리들의 버전과 기타 config.js 파일들을 적어놓고자 한다.

// craco.config.js //

module.exports = {
  style: {
    postcssOptions: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

// postcss.config.js //

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

// package.json //
{
  "dependencies": {
    "@craco/craco": "^6.4.5", // 관련 라이브러리
    "@reduxjs/toolkit": "^1.8.4",
    "@tailwindcss/postcss7-compat": "^2.2.17", // 관련 라이브러리
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.47",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@types/react-redux": "^7.1.24",
    "@types/redux": "^3.6.0",
    "axios": "^0.27.2",
    "gh-pages": "^4.0.0",
    "http-proxy-middleware": "^2.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1", // 관련 라이브러리
    "redux": "^4.2.0",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8", // 관련 라이브러리
    "postcss": "^8.4.16", // 관련 라이브러리
    "postcss-loader": "^7.0.1", // 관련 라이브러리
    "tailwindcss": "^3.1.8" // 관련 라이브러리
  },
}

지금보니 postcss7-compat이 postcss 버전인 8.과 맞지 않을 것 같아보이긴한다.
그런데 이 둘로 인한 문제는 아니었다. 정말 신기하다.
정확한 원인이 무엇이란 말인가..

추가. 다시 같은 에러

해결했다고 생각했는데 다시 같은 에러가 발생했다.
이번에는 위 코드들이 그대로 유지된 채로 있었는데, 에러를 발생시킨 놈은 아래의 코드였다.

import { artistArr, ArtistsListPropsType } from "./Interface";

function ArtistsList({ moveToArtist, currArtist }: ArtistsListPropsType) {
  return (
    <nav className="hidden lg:flex justify-center w-screen top-1/2 fixed">
      <ul className="flex flex-col items-center font-semibold xl:text-xl">
        {artistArr.map((item, index) => (
          <li
    		className={`hover:cursor-pointer [&:nth-child(${
              currArtist + 1
            })]:border-b-2 border-black`}
            key={index}
            onClick={() => moveToArtist(index)}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </nav>
  );
}

export default ArtistsList;

className을 잘 보면 props로 받아온 currAritst를 사용하는 것을 볼 수 있다.
이게 바로 문제의 원인으로 생각된다.
currAritst의 타입은 number였으며 useState로 생성한 state이다.
stackoverflow에 질문을 올렸을 때 받았던 답이 currArtist의 타입을 바꿔보라는 것이었는데, 다른 쪽을 수정함으로써 문제가 해결되는 바람에 대수롭지 않게 넘겨버렸다.
그러나 문제가 재발하면서 이게 원인이라는 생각이 들었다.
Tailwind를 사용하다보면 PostCSS와 같이 사용하는 경우가 매우 많을 것이다.(필자는 지금까지 그렇게 해왔다)
저 코드는 PostCSS가 컴파일할 수 없는 방식의 코드였던 것이다.
어떻게든 저 코드를 살려보려고 calc를 써보기도했지만, 결국 지우는 것이 답이었다.
다른 방법으로 접근해야할 것 같다.
nth-child에 일반적인 숫자(예를들어 3)를 입력하면 멀쩡하게 작동하는 것으로 보아 currAritst에서 야기된 문제라는 것에 확신이 들기 시작한다...

추가. 결론

PostCSS가 컴파일할 수 있는 코드를 작성해야한다.
그렇지않으면 같은 에러를 마주하게 될 것이다.
특히나 className에서 변수를 사용할 때 조심해야한다. 막 써대면 안된다.

참고 자료

첫 질문글이라 콩글리쉬와 두서없는 설명의 남발이었다.
그래도 한 분이라도 코멘트를 달아주셨다는 것에 큰 감사함을 느낀다.
필자의 stackoverflow 질문글