[13 | Next.js] prettier v3 + prettier-plugin-tailwindcss 설정 관련 이슈

넥스트 프로젝트를 진행하면서 테일윈드를 사용하게 됐는데 발빠른 사람들이 tailwindcss의 클래스명을 정렬해주는 플러그인을 만들었길래 적용해보았다. 공식 repo에 가보면 class명을 어떤 순서로 자동으로 정렬해주는 지 설명해주기 때문에 README를 읽어보고 원하면 적용하는 것이 좋을 거 같다. 

 

아래는 prettier-plugin-tailwindcss 의 공식 repo이다. 

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

 

문제상황

플러그인 설정 방법도 쉬운 거 같아서 바로 dev환경에 설치하고 적용해보았는데 class명이 sorting되지 않는 문제가 발생했다. 참고로 기존에 prettier를 설치하여 사용중이었고 해당 프로젝트에 .prettierrc 파일이 이미 존재하고 있었다. 

 

로컬 환경 

우선 설치한 버전들은 아래와 같다. 

//package.json

"dependencies": {
    "@types/node": "20.5.2",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "postcss": "^8.4.30",
    "prettier": "^3.0.2",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "^3.3.3"
  }

원인이 될만한 패키지의 버전을 보면 아래와 같다. 

• tailwindcss v3
• prettier-plugin-tailwindcss v0.5
• prettier v3

원인 추측

1. 설정을 건들인 것이므로 vscode를 재부팅하면 제대로 동작할 것이다 => X

2. 현재 prettier-plugin-tailwindcss가 prettier 3버전을 지원하지 않기 때문에 다운그레이드 해야한다. => X

• REAMD에 보면 지원한다고 나와있다.

3. prettier에 추가적으로 class명 정렬을 하는 플러그인이기 때문에 prettier 세팅과 충돌이 있거나 프리티어가 인식하지 못하는 것이다. => O

• 그래서 prettierrc 파일에 plugins 배열에 해당 플러그인 명을 넣어줬음에도 불구하고 인식이 되지 않았다. 
• 구글링을 통해서 비슷한 이슈를 찾았다. https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/191

Plugin not working · Issue #191 · tailwindlabs/prettier-plugin-tailwindcss

원인을 보니 prettierrc의 확장자로 json을 명시해줘야하고 json에서는 정상동작하는 거 같았다.

 

.prettierrc => .prettierrc.json 으로 변경하니 정상동작하였다. 해결완료👧

{
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "all",
  "useTabs": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "endOfLine": "auto",
  "plugins": ["prettier-plugin-tailwindcss"]
}