지난 포스트에서 Tawilwind CSS에 대한 기본문법에 대해 알아보았습니다.
Tailwind CSS를 처음 사용하다 보면 다양한 문제에 직면하게 됩니다.
이번 글에서는 처음 Tailwind CSS를 사용하면서 제가 겪었던 문제들을 소개하고, 이를 해결했던 방법들을 공유하려 합니다.
1. Tailwind 초보자를 위한 VS Code Extension
제가 처음 겪었던 문제는 유틸리티 클래스의 이름이 헷갈리고 낯설다는 점이었습니다.
유틸리티 클래스의 종류가 많다 보니 어떤 클래스가 어떤 스타일을 나타내는지 초반에는 익숙해지기가 쉽지 않은데, 자동완성도 되지 않으니 오타가 발생했을 때는 디버깅 하는 데만 많은 시간이 소요될 것으로 예상했습니다.
해결방법
아래 확장 프로그램을 사용하면 Tailwind CSS를 보다 쉽게 활용할 수 있습니다.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense는 다음과 같은 기능을 제공합니다.
- Tailwind 클래스 자동 완성
- 클래스 이름에 대한 실시간 미리보기
- 클래스 이름의 오류 감지 및 추천
장점: 초보자가 클래스 이름을 직접 외우지 않아도 되고, 빠르게 입력할 수 있습니다.
예제:
2. 팀 협업을 위한 class 순서 정렬 플러그인
팀 협업 과정에서 팀원들이 유틸리티 클래스의 순서를 다르게 작성한다면 가독성이 떨어지고 코드 리뷰나 유지보수 과정에서 혼란이 생길 것이라는 점을 미리 예상할 수 있었습니다.
왜냐하면, 저 자신부터 유틸리티 클래스의 순서를 계속 다르게 작성하고 있었기 때문입니다.
Tailwind CSS는 클래스의 순서가 스타일에 영향을 미치지 않더라도, 코드의 가독성과 일관성을 위해 일정한 순서로 작성되는 것이 매우 중요합니다. 하지만 유틸리티 클래스가 많아질수록 순서를 정리하는 일이 쉽지 않았고, 이런 문제가 협업 시 더 크게 부각될 것임을 깨달았습니다.
예시
아래는 동일한 스타일링이지만, 두 팀원이 클래스 순서를 다르게 작성한 경우입니다:
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
Click Me
</button>
<button class="hover:bg-blue-700 rounded px-4 py-2 text-white bg-blue-500">
Click Me
</button>
문제점
1. 가독성 저하:
클래스 순서가 일관되지 않으면 읽기 어렵고, 코드를 수정하거나 리뷰할 때 시간이 더 걸립니다.
2. 코드 리뷰 시 혼란:
코드가 동일한 스타일을 구현하지만, 순서가 달라 리뷰어는 중복되거나 불필요한 수정을 발견하기 어려워질 수 있습니다.
3. 협업 효율성 저하:
여러 팀원이 작성한 코드가 순서와 형식이 일관되지 않아, 코드의 품질이 떨어지고 유지보수가 어려워질 수 있습니다.
해결방법
prettier-plugin-tailwindcss플러그인을 도입하면,
클래스 이름의 순서를 자동으로 정렬하여 팀원 간의 일관성을 유지할 수 있습니다.
prettier-plugin-tailwindcss란?
prettier-plugin-tailwindcss는 Tailwind CSS의 유틸리티 클래스들을 의미 있는 순서로 자동 정렬해주는 플러그인입니다.
이 플러그인은 Prettier와 함께 동작하며, CSS 관련 코드를 정리할 때 클래스의 순서를 Tailwind의 규칙에 맞게 정렬합니다.
설치 및 설정
- 플러그인 설치
prettier-plugin-tailwindcss를 설치합니다
npm install -D prettier prettier-plugin-tailwindcss
- Prettier 설정
프로젝트 루트에.prettierrc파일이 없는 경우 생성한 뒤, 아래 설정을 추가합니다
{
"plugins": ["prettier-plugin-tailwindcss"]
}
혹은, package.json에 다음과 같이 추가합니다.
"prettier": {
"plugins": [
"prettier-plugin-tailwindcss"
]
}
사용 방법
클래스 자동 정렬
Prettier를 실행하거나 저장 시 자동으로 Tailwind 클래스가 정렬됩니다.
예를 들어:
정렬 전
<div class="text-white bg-blue-500 px-4 rounded hover:bg-blue-700 p-2">
Button
</div>정렬 후
<div class="bg-blue-500 hover:bg-blue-700 p-2 px-4 text-white rounded">
Button
</div>Prettier가 설치되어 있다면, 저장 시 Tailwind 클래스가 자동으로 정렬됩니다.
이번 포스트는 여기까지입니다.
Tailwind CSS를 사용하면서, 팀 협업과 코드의 일관성을 유지하기 위해 어떤 도구와 방법을 사용할 수 있는지 알아보았습니다. 특히, VS Code 확장 프로그램과 Prettier를 활용한 클래스 정렬로 작업 효율을 높이는 방법을 살펴봤습니다.
다음 포스트에서는, Tailwind CSS를 사용할 때 rem 단위와 px 단위 간의 불편함을 해결하는 방법에 대해 다룰 예정입니다.
