Core Concepts
Utility-First
- tailwind css의 메인 컨셉이면서 가장 큰 장점이다.
- 스타일 코드 자체가 HTML 코드 안에 있기 때문에 HTML과 CSS 파일을 별도로 관리할 필요가 없다.
- 태그 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾을 필요도 없어진다.
- 전체 padding, flexbox 등 layout 지정이 간편하다.
- 동일한 색상 및 사이즈로 일관된 디자인을 유지하기가 쉬워진다.
Responsive Design
- 모든 유틸리티 클래스는 서로 다른 breakpoint에서 조건부로 적용할 수 있기 때문에 HTML를 크게 떠나지 않고 복잡한 인터페이스를 구축할 수 있다.
- 만약 특정 breakpoint에만 적용 시키려면 유틸리티에 breakpoint 이름 앞에
: 를 붙이기만 하면 된다.
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">
- 프레임워크 모든 유틸리티 클래스에 적용되므로 문자 간격이나 cusor 스타일 등 지정된 breakpoint에서 모든 항목을 변경할 수 있다.
- breakpoints는
min-width 만 포함하고 있다.
Hover, focus & Other states