tailwindcss가 주목받는 점

• 작은 단위로 자유롭게 레이아웃을 구축할 수 있다.
  • bootstrap, 프레임워크는 우리를 제한시키지만 이 친구는 그렇지 않다.
• 유틸 스타일을 많이 제공해줘서 편하게 layout를 구축할 수 있다.
• 무친 plugin이 즐비되어 있다.
  • 자동완성
  • 충돌되는 css 경고
  • 스타일 원본 표시
  • 색상표시
  • 스타일 순서 정렬
    • 누가 스타일를 작성하든 일관성 있는 코드를 작성할 수 있다.

짜잘한 예시

relative-top-5
items-center
space-x-3
aspect-square w-8
ring-2
ring-offset-2

modifiers

transition
hover:bg-teal-500
active:bg-yellow-500

first:bg-blue-50
only:bg-red-500
odd:bg-blue-50
empty:hidden

group
group-hover:bg-red-300
peer
peer-invalid:bg-red-500
focus-within:bg-blue-50

• tailwind는 내부적으로 css 변수를 활용하기에 복잡한 UI를 짧고 쉽게 조립할 수 있다.
• group를 활용해서 자식 css를 수정할 수 있다.
• peer를 활용해서 형제 css를 수정할 수 있다.

selector:
open:
file:
first-letter:

responsive

sm:bg-teal-50
md:bg-teal-300
lg:bg-teal-400

xl:grid-cols-3

lg:col-span-2
xl:col-span-1
xl:place-content-center

portrait:
landscape: