Prettier와 함께 작동하며 권장하는 클래스 순서에 따라 Tailwind CSS 클래스를 자동으로 정렬해주는 플러그인 입니다. 이는 코드의 가독성을 높이고, 일관된 코딩 스타일을 유지하는데 큰 도움이 됩니다.

1. 설치

1-1. 설치: 프로젝트에 prettier-plugin-tailwindcss를 설치합니다.

yarn add -D prettier-plugin-tailwindcss

1-2. prettier plugins에 추가

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

2. 사용 방법

설치와 설정이 완료되면, prettier-plugin-tailwindcss는 자동으로 Tailwind CSS 클래스를 정렬합니다. 파일을 저장할 때마다, 혹은 Prettier를 명시적으로 실행할 때마다 클래스가 정렬됩니다.

예를 들어, 파일 내에 다음과 같은 클래스가 있다고 가정해 보겠습니다.

<div className="text-center p-4 bg-red-500 lg:bg-green-500 flex justify-center items-center"></div>

prettier-plugin-tailwindcssS를 사용하면, 이 클래스 목록이 Tailwind CSS의 규칙에 따라 자동으로 정렬되어 다음과 같이 변합니다.

<div className="flex items-center justify-center bg-red-500 p-4 text-center lg:bg-green-500"></div>

prettier-plugin-tailwindcss는 Tailwind CSS를 사용하는 프로젝트에서 코드의 일관성과 가독성을 향상시키는 훌륭한 도구입니다. 설치와 사용이 간편하며, 코딩 스타일을 자동으로 관리해줌으로써 개발자의 작업 부담을 크게 줄여줍니다. Tailwind CSS와 함께 프론트엔드 개발을 하는 개발자라면 이 플러그인을 꼭 사용해보시길 권장합니다.