[Next.js] "Tailwind CSS Prettier 플러그인의 정렬 우선순위 이해하기!"

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 다양한 스타일을 빠르게 적용할 수 있게 해준다.

🚨잠깐!!🚨 Tailwind CSS에 대해서는 아래 글을 참고하자!
https://pangil-log.tistory.com/228?category=1316098

[Next.js] "Tailwind CSS: 왜 많은 개발자들이 사랑하는가?"

 

이 프레임워크는 CSS 스타일을 구성하는 데 있어 개발자가 원하는 모든 구성 요소를 간편하게 사용할 수 있도록 돕는다. 그러나 클래스 속성이 섞이거나 순서가 일정하지 않으면 가독성이 떨어질 수 있다.

 

이를 해결하기 위해 Tailwind CSS Prettier 플러그인을 사용하면 클래스 속성을 자동으로 정렬해준다.

 

이 글에서는 Tailwind CSS Prettier 플러그인이 갖고 있는 정렬 우선순위에 대해 알아보겠다.

 

 

 

정렬 우선순위란?

 

정렬 우선순위란, Tailwind CSS 클래스가 적용될 때 어떤 순서로 정렬되는지를 정의하는 규칙이다.

 

이 규칙은 일관성을 유지하고 코드의 가독성을 향상시키기 위해 Tailwind CSS Prettier 플러그인에 의해 자동으로 적용된다.

 

이러한 규칙은 팀의 코드 스타일을 통일하는 데도 큰 도움이 되며, 각 팀원이 작성하는 코드가 서로 잘 어우러질 수 있도록 돕는다. 정렬 우선순위는 클래스 사용의 패턴을 정의하고, 팀 전체의 생산성을 높이는 데 기여할 수 있다.

 

 

 

기본 정렬 우선순위

 

Tailwind CSS Prettier 플러그인은 다음과 같은 기본 정렬 우선순위를 가진다

 

1순위) 레이아웃 관련 클래스

: flex, grid, block, inline, inline-block 등 레이아웃을 설정하는 클래스는 가장 먼저 정렬된다.

<div className="flex items-center">...</div>

 

2순위) 디스플레이 관련 클래스

: flex-col, flex-row, hidden, visible 등 디스플레이 관련 속성이 뒤따른다.

<div className="hidden lg:flex">...</div>

 

3순위) 포지션 관련 클래스

: absolute, relative, fixed, sticky 등의 포지션 관련 클래스가 그 다음 순서로 정렬된다.

<div className="absolute top-0 left-0">...</div>

 

4순위) 사이즈 관련 클래스

: w-, h-, max-w-, max-h- 등 크기 관련 클래스가 이어진다.

<div className="w-64 h-32">...</div>

 

5순위) 여백 관련 클래스

: m-, p-, mt-, mr-, mb-, ml-, mx-, my- 등 여백 관련 클래스가 그 다음에 정렬된다.

<div className="mt-4 mb-2">...</div>

 

6순위) 색상 관련 클래스

: bg-, text-, border- 등 색상과 관련된 클래스가 마지막에 정렬된다.

<button className="bg-blue-500 text-white">클릭하세요</button>

 

🚨우선순위 요약🚨

1. 레이아웃 관련 클래스
2. 디스플레이 관련 클래스
3. 포지션 관련 클래스
4. 사이즈 관련 클래스
5. 여백 관련 클래스
6. 색상 관련 클래스

 

 

 

예제

 

예제를 통해서 어떤 식으로  Tailwind CSS 클래스가 자동으로 정렬되는지 살펴보자.

 

원래 코드:

<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

정렬 후 코드:

<button className="flex bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded text-white">
  클릭하세요
</button>

 

이 예제에서 보듯이, 클래스의 순서가 정렬 우선순위에 따라 재배치된다. 정렬 후 코드가 더 일관되게 보이는 것을 확인할 수 있다. 이는 코드의 가독성을 높이는 데 기여한다.

 

 

 

정렬 우선순위의 장점

 

그렇다면, 정렬 우선순위를 따르는 것은 어떤 장점들이 있을까?

• 가독성 향상: 일관된 클래스 정렬은 코드를 읽기 쉽게 만든다. 잘 정리된 코드는 다른 개발자나 팀원이 이해하기 쉬워지므로, 코드 유지보수가 간편해진다.
• 유지보수 용이: 코드가 일관되면 수정이 용이하다. 예를 들어, 특정 클래스를 추가하거나 수정할 때, 어디에 넣어야 할지 명확해진다.
• 협업 시 효율성 증가: 팀원 간 코드 스타일이 통일되면 코드 리뷰가 쉬워진다. 정렬 우선순위를 따르는 것은 모든 팀원이 같은 스타일로 작업하도록 유도하므로, 커뮤니케이션을 줄일 수 있다.

 

 

 

---

Tailwind CSS Prettier 플러그인은 Tailwind CSS 클래스의 정렬 우선순위를 정의하여 일관성 있는 코드 작성에 도움을 준다. 이를 통해 가독성이 높아지고, 협업 시 생산성을 극대화할 수 있다. Tailwind CSS를 사용하는 개발자라면 이 플러그인을 적극 활용하여 더 나은 코드를 작성해보기를 권장한다.

 

Tailwind CSS Prettier 플러그인의 정렬 우선순위를 이해하고 활용하면 팀 프로젝트 및 오픈소스 기여에서도 큰 이점을 얻을 수 있다.

 

더 많은 정보는 Tailwind CSS 공식 문서에서 확인할 수 있다.