Tailwind CSS 설치 및 초기화

Tailwind란

Tailwind는 CSS를 보다 간편하게 사용하기 위한 CSS 프레임워크이다.
별도의 CSS 파일이나 style 태그를 사용하지 않고 정해진 class 이름을 사용하면 스타일이 적용되는 간단하면서 직관적인 코드작성을 도와준다.

https://tailwindcss.com

장점

1. 빠른 스타일링 작업이 가능하다.
2. class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 된다.
3. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만, IntelliSense 플러그인을 통해 금방 익술 해 질 수 있다.

설치

설치방법은 아래와 같다.

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

설치가 완료되면, 생성된 파일 tailwind.config.js 에 설정을 해줘야하는데,

본인 기준으로는 이미 셋팅이 완료되었다.

그리고 global.css 파일도 수정해주어야한다.

Prettier를 통한 TailwindCSS 클래스 자동 정렬 플러그인

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

npm install -D prettier prettier-plugin-tailwindcss

적용후

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

Tailwind CSS IntelliSense (확장 프로그램)

Tailwind CSS IntelliSense는 Visual Studio Code 사용자에게 자동 완성, 구문 강조 표시 및 린팅과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상시킵니다.