Tailwind - Core(Utility-First CSS, State)

Tailwind - Core(Utility-First CSS, State)

#Web/CSS

Utility-First CSS

Utility-First CSS는 미리 정의된 작은 유틸리티 클래스들을 사용하여 HTML 요소에 스타일을 직접 적용하는 방식이다. Tailwind CSS는 미리 정의된 유틸리티 클래스를 HTML에서 바로 사용해 빠르게 스타일을 지정하는 방식을 취한다.

Hover, Focus, and Oother States

hover, focus 등의 상태의 element을 스타일링할 때 유틸리티를 사용할 수 있다.

• EX)
  • hover 상태 배경색 변경: hover:bg-blue-700

Tailwind Css의 장점

• 클래스 이름 발명의 필요성 없음: 기존 방식에서는 스타일을 지정하기 위해 새로운 클래스 이름을 만들어야 했습니다. 하지만 Tailwind CSS에서는 미리 정의된 유틸리티 클래스만으로도 충분한 스타일을 지정할 수 있습니다.
• CSS 파일 확장 방지: 기존 방식에서는 새로운 기능이 추가될 때마다 CSS 파일이 점점 커졌습니다. 하지만 Tailwind CSS는 유틸리티 클래스가 재사용되기 때문에 새 CSS를 거의 작성할 필요가 없습니다.
• 안전한 변경: CSS는 전역적으로 작용하기 때문에, 한 곳에서 스타일을 변경하면 다른 곳에 의도치 않은 영향을 미칠 수 있습니다. 그러나 Tailwind CSS의 클래스는 HTML 내에서 로컬로 작용하므로, 걱정 없이 스타일을 변경할 수 있습니다.

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복