728x90
Tailwind CSS는 일반적으로 인라인에 사용하기 때문에 html 코드가 길어져서 가독성을 저해한다는 단점이 존재한다.
그래서 Tailwind CSS가 너무 길면 줄바꿈을 실행하는 방법을 찾아봤다.
(나와 같은 고민을 하는 사람이 꽤 많다는 것을 이 깃 이슈를 보고 알 수 있었다.)
Tailwind나 ESLint가 자체적으로 지원하는 것은 없고 외부 라이브러리를 통해 가능하다.
그러나 해당 라이브러리를 쓰게 되면 기존에 프로젝트에 설정해놓은 ESLint + Prettier와 충돌이 난다.
그 원인은 다음과 같다.
우선 class를 여러 줄에 나눠쓰는 것은 prettier에 위배된다.
그렇기 때문에 prettier와 readable-tailwind 중 하나를 선택해서 사용해야 한다.
또는 두 가지 플러그인을 모두 사용하고 settings.json의 formatOnSave 속성을 꺼두는 방법이 있다.
하지만 이 방법은 prettier를 사용하는 이점을 누릴 수 없게 된다.
그렇기 때문에 readable-tailwind 라이브러리를 사용하지 않고 기존 프로젝트 세팅 상태로 사용하되, class가 너무 길어질 것 같다면 clsx나 문자열로 변수 정의해서 쓰거나 @(디렉티브)를 활용하여 스타일을 분리하는 방법을 활용하는 것이 적합하다고 판단했다.
728x90
'CSS' 카테고리의 다른 글
[ CSS ] input type=”number” 화살표 없애기 (0) | 2024.11.21 |
---|---|
[ Tailwind CSS ] tailwind에서 nth-child 쓰는 법 (0) | 2024.11.13 |
[ CSS ] 자식 요소의 width를 부모 요소의 width에 대한 비율로 정하고 싶을 때 (0) | 2024.06.21 |
[ CSS ] 이미지 비율 설정 aspect-ratio (0) | 2024.06.21 |
[ styled components ] keyframe 사용법 (0) | 2024.06.14 |