240319 개발일지 TIL - tailwind css 사용시 자식 요소에게 block 줄바꿈이 적용이 안될 때

<div class="min-h-screen flex items-center justify-center">
    <div class="block bg-red-500">첫 번째 블록</div>
    <div class="block bg-green-500">두 번째 블록</div>
</div>

문제 발생

tailwind css 사용시 자식 요소들에게 줄바꿈을 적용하던 중 발생한 현상.

문제 원인

자식 요소들에게 컨테이너 역할을 할 div로 묶어주고 tailwind css에서 지원하는 클래스를 적용해줘야 함.

해결방법

<div class="min-h-screen flex items-center justify-center">
  <div class="flex flex-col">
    <div class="block bg-red-500">첫 번째 블록</div>
    <div class="block bg-green-500">두 번째 블록</div>
  </div>
</div>

자식 요소들에을 div로 한 번 더 감싸고 flex와 flex-col(세로 방향(열 방향)) 클래스를 적용해주면 자식 요소들에게 줄바꿈이 적용된다.

느낀 점

잘 사용하는 클래스명은 암기를 하고 있는데 가끔 떠오르지 않을 때가 있어 공식문서를 찾아보아야 한다.