[Next.js] "Tailwind CSS, 더 깔끔하고 예쁘게 정리하는 방법!"

서론

 

Tailwind CSS를 사용하다 보면 클래스 속성의 순서가 뒤죽박죽이 되거나 통일성이 부족한 경우가 많다. 이런 경우 코드의 가독성이 떨어지고, 특히 협업 시 코드를 이해하는 데 불필요한 시간이 소요될 수 있다.

 

이를 해결하기 위해 Tailwind CSS의 속성을 자동으로 정렬해주는 Tailwind CSS Prettier 플러그인을 사용해보았다. 이 플러그인은 JSX 또는 HTML 파일 내에서 Tailwind CSS 클래스를 일정한 순서로 정렬하여 코드의 일관성을 유지하고 가독성을 향상시키는 역할을 한다.

🚨잠깐!!🚨 Tailwind CSS 클래스의 정렬 우선순위에 대해서는 아래 글을 참고하자!
https://pangil-log.tistory.com/233

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

 

이번 글에서는 Tailwind CSS Prettier 플러그인의 설치 방법과 사용법을 알아보도록 하겠다.

 

 

 

설치 방법

 

1) Prettier 및 Tailwind CSS Prettier 플러그인 설치

Tailwind CSS 클래스의 자동 정렬 기능을 사용하려면 Prettier와 Tailwind CSS Prettier 플러그인을 먼저 설치해야 한다. 터미널에서 다음 명령어를 실행하면 된다.

npm install --save-dev prettier prettier-plugin-tailwindcss

 

2) ES 모듈 환경 설정 (필요한 경우)

ES 모듈 환경에서 사용하려면 package.json 파일을 수정하여 "type": "module"을 추가해야 한다. ES 모듈 환경에서는 import/export 구문을 사용할 수 있으며, CommonJS 환경에서는 require를 사용할 수 있다.

{
  "type": "module"
}

 

3) Prettier 설정 추가

Prettier가 Tailwind CSS Prettier 플러그인을 인식하도록 프로젝트 루트 디렉토리에 prettier.config.js 파일을 생성하거나 기존 파일을 수정한다.

import * as tailwindPlugin from "prettier-plugin-tailwindcss";

/** @type {import("prettier").Config} */
const config = {
  plugins: [tailwindPlugin],
};

export default config;

 

이제 Prettier를 실행하면 Tailwind CSS 클래스가 자동으로 정렬된다.

 

 

 

예시를 통해 보는 적용 과정

 

Prettier가 실행될 때, Tailwind CSS 클래스가 자동으로 정렬된다.

 

예를 들어, 다음과 같이 클래스가 섞여 있을 경우를 보자.

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

이 상태에서 Prettier가 실행되면 다음과 같이 정렬된다:

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

 

 

 

사용 방법

 

그렇다면, 어떻게 Prettier가 실행될까? 다양한 방법이 있지만, 커맨드라인에서 실행하는 방법을 살펴보자!

프로젝트 루트 디렉토리를 기준으로 해서, 다음 명령어를 사용하여 특정 파일 또는 디렉토리를 포맷팅할 수 있다.

 

1) 전체 파일 포맷팅

npx prettier --write .  # 현재 디렉토리 및 하위 파일 모두 포맷팅

 

2) 특정 파일 포맷팅

npx prettier --write src/app/layout.tsx  # 특정 파일 포맷팅

 

 

 

---

Tailwind CSS Prettier 플러그인을 사용하면 클래스의 순서를 자동으로 정렬하여 코드의 일관성을 높이고, 협업 시 가독성을 개선할 수 있다. 이를 통해 개발자는 더욱 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있으며, 코드 리뷰 과정에서도 불필요한 스타일 정렬 논의를 줄일 수 있다.

 

또한, 프로젝트 내의 스타일 규칙을 명확하게 정의하고 유지할 수 있어 개발자 간의 협업이 더욱 원활해진다. 따라서 Tailwind CSS와 함께 Prettier 플러그인을 적극적으로 활용하면 코드 품질을 향상시키고 생산성을 극대화할 수 있을 것이다.

 

추가로, Tailwind CSS와 Prettier 플러그인에 대한 더 많은 정보는 Tailwind CSS 공식 문서에서 확인할 수 있다.