Tailwind CSS를 여러 줄에 나눠써도 될까?

Tailwind CSS는 일반적으로 인라인에 사용하기 때문에 html 코드가 길어져서 가독성을 저해한다는 단점이 존재한다.

그래서 Tailwind CSS가 너무 길면 줄바꿈을 실행하는 방법을 찾아봤다.

 

 

Break long class names into multiple lines? [Prettier Plugin] · tailwindlabs tailwindcss · Discussion #7763

(나와 같은 고민을 하는 사람이 꽤 많다는 것을 이 깃 이슈를 보고 알 수 있었다.)

 

 

Tailwind나 ESLint가 자체적으로 지원하는 것은 없고 외부 라이브러리를 통해 가능하다. 

eslint-plugin-readable-tailwind

 

 

그러나 해당 라이브러리를 쓰게 되면 기존에 프로젝트에 설정해놓은 ESLint + Prettier와 충돌이 난다.

 

그 원인은 다음과 같다.

 

우선 class를 여러 줄에 나눠쓰는 것은 prettier에 위배된다.

그렇기 때문에 prettier와 readable-tailwind 중 하나를 선택해서 사용해야 한다.

 

또는 두 가지 플러그인을 모두 사용하고 settings.json의 formatOnSave 속성을 꺼두는 방법이 있다. 

하지만 이 방법은 prettier를 사용하는 이점을 누릴 수 없게 된다.

 

그렇기 때문에 readable-tailwind 라이브러리를 사용하지 않고 기존 프로젝트 세팅 상태로 사용하되, class가 너무 길어질 것 같다면 clsx나 문자열로 변수 정의해서 쓰거나 @(디렉티브)를 활용하여 스타일을 분리하는 방법을 활용하는 것이 적합하다고 판단했다.