Tailwind CSS 사용기

간단 소개

Tailwind CSS 사용 시 Arbitrary values 관리, Preflight 처리, className props 문제 해결, Headwind 플러그인 활용 팁을 제공합니다.

AI Summary

Tailwind CSS 도입 시 유용한 팁
- Arbitrary values 사용을 줄이기 위해, px 단위 디자인 요구사항에 맞춰 tailwind.config.js 파일에서 테마를 커스터마이징하여 px에 대한 프리셋을 extend로 등록한다. 이를 통해 코드의 가독성을 높이고 개발 생산성을 향상시킬 수 있다.
- Preflight 처리는 브라우저 기본 스타일과의 충돌을 방지하기 위해 필요하며, 필요에 따라 비활성화할 수 있다. h1 태그 폰트 크기 관련 예시처럼, 예상치 못한 스타일 문제를 방지해야 한다.
className props 사용 시 문제점 및 해결 방안
- 컴포넌트에 className props를 추가할 때, Tailwind CSS의 우선순위 문제로 인해 의도한 스타일이 적용되지 않을 수 있다. Tailwind CSS는 소스 코드에 선언된 클래스의 순서와 상관없이 정의된 순서에 따라 스타일을 구성하기 때문이다.
- twin.macro는 className에 선언된 여러 클래스 중 뒤에 위치한 클래스가 최종적으로 적용되도록 하여 우선순위 문제를 해결한다. 이를 통해 개발자는 스타일 결과를 명확히 예측하고 생산성을 높일 수 있다.
Headwind 플러그인 활용
- Headwind는 Tailwind CSS 클래스를 스타일 카테고리별로 정렬하여 코드의 가독성을 높이고, 중복된 CSS 속성 기입으로 인한 휴먼 에러를 줄이는 데 도움을 준다.