tailwind css prettierrc 적용하기

tailwind css prettierrc 적용기 ~

 

많은 개발자들이 깔끔한 코드를 위해 prettierrc 사용하죠 ~~

그리고 요즘 프론트 개발자들이 많이 사용하는 tailwind !!!

단점이라면 class 에 넣다보면 규칙성 없이 적용해 지저분하죠 !!

 

그것을 단번에 해결할 수 있는 방법은 바로 tailwind css prettierrc 적용하면 됩니다.

 

일단 공식문서링크

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

Automatic Class Sorting with Prettier - Tailwind CSS

 

적용방법은 아래 스크린샷 처럼 하면 되는데

 

적용방법을 간단하면 설명하면

 

1. npm 설치한다.

2. 가장 상위 폴더에  .prettierrc 파일을 만든다.

3. 아래 사진 코드를 .prettierrc 파일에 넣으면 됩니다.

{

"plugins": [

"prettier-plugin-tailwindcss"

]

}

 

4. 적용되면 올린 코드가 text 부터가 아닌 bg 부터 시작한다.

 

 

파일 전체 코드 적용된 모습 

항상 블로그를 보면 전체 코드가 안보여서 나는 올렸다 ㅋㅋㅋ

 

저의 삽질기가 조금이나마 도움이 되서 명쾌하게 해결되면 좋겠습니다.

그리고 확실히 깔끔해요 !!