prettier-plugin-tailwindcss(tailwindcss 클래스 자동 정렬 플러그인)

Jake·2024년 3월 23일

tailwindcss 클래스를 권장 클래스 순서에 따라 자동 정렬해주는 prettier 플러그인 입니다.

설치

npm install -D prettier prettier-plugin-tailwindcss
# or
yarn add -D prettier prettier-plugin-tailwindcss

이후 프로젝트 루트에 prettier.config.js 파일이 없을 경우 파일을 추가하고 아래 내용을 추가합니다.

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

prettier 적용 전

<div className="px-12 flex-col gap-10 py-5 flex w-full">

prettier 적용 후

<div className="flex w-full flex-col gap-10 px-12 py-5">