Tailwind CSS를 사용하기 위한 세팅 자체는 굉장히 쉽습니다! 공식 문서에서 잘 설명이 되어 있어요.

- https://tailwindcss.com/docs/installation/using-vite

설치가 완료되고, 사용할 준비가 되면 보통은 @theme 지시어(directive)를 통해 색상과 같은 디자인 토큰을 세팅합니다.

- https://tailwindcss.com/docs/theme

유용한 확장 및 플러그인도 소개시켜드릴게요.

1. Bracket Select - https://marketplace.visualstudio.com/items?itemName=chunsen.bracket-select
: 단축키로 따옴표 내의 모든 내용을 선택 할 수 있어요. 이거 익숙해지면 진짜 편합니다.
2. Tailwind CSS IntelliSense - https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
: 무조건 필요한 확장입니다. 꼭 설치하세요. 편한 기능이 다 들어있어요.
3. prettier-plugin-tailwindcss - https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
: 클래스 네임들을 자동으로 일관성 있게 정렬해줘요. 조금이나마 어지러운 클래스 네임들을 정리할 수 있습니다.
4. Tailwind Fold - https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold
: 클래스 네임들을 접었다 폈다 할 수 있어요. 저는 오히려 불편해서 안 쓰긴 합니다.