[Tailwind CSS] Prettier 적용하기

Prettier 적용하기

들어가며

• Tailwind CSS에 Prettier를 적용하는 방법을 간단하게 정리해본다.

 

Prettier

개념

• Prettier는 코드 포맷터(Code Formatter)로, 기본적으로 CSS, HTML, JS 파일의 코드를 포맷팅해준다.
• Tailwind CSS 또한 Prettier를 이용하여 클래스 이름을 알파벳 순서대로 정렬하거나, 보기 좋게 묶어주도록 할 수 있다.
• 대표적인 Tailwind CSS Prettier 플러그인으로 @prettier-plugin-tailwindcss@가 있다.

 

방법

라이브러리 설치하기

• 터미널에 아래 명령을 실행하여 @prettier@과 @prettier-plugin-tailwindcss@ 라이브러리를 설치해준다.

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

 

설정하기

• 프로젝트 최상단 경로(@/@)에 @prettier.config.js@ 파일과 @.prettierrc@ 파일을 생성하고, 다음과 같이 내용을 작성한다.

 

prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  // ...
};

 

.prettierrc

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

 

사용법

• 코드 파일을 저장하면 테일윈드 CSS 클래스명이 알파벳 순으로 정렬된다.

 

참고 사이트

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

prettier-plugin-tailwindcss

Automatic Class Sorting with Prettier