TailwindCSS
-
[Tailwind css] gap , space (feat. Flex)FrontEnd/Tailwind css 2024. 9. 4. 09:55
둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌gap: Flexbox나 Grid 레이아웃에서 사용space: 일반적인 형제 요소들 사이의 간격을 조절할 때 사용적용 방식:gap: 부모 컨테이너에 직접 적용space: 부모 컨테이너에 적용하며, 자식 요소들에 마진을 추가.gap-x-2 { column-gap: 0.5rem /* 8px */;}.space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem /* 8px */ * var(--tw-space-x-reverse)); margin-left: calc(0.5rem /* 8px */ * calc(1 - var(--tw-spac..