TailwindCSS2 모노레포로 공통 된 tailwind config를 생성하기(turborepo, next.js, tailwind) - 2024.12.11 기준 turborepo에서 제공하는 with tailwind 옵션을 통해 초기 셋팅을 한다면 tailwind-config가 자동으로 추가되지만 학습 목적을 가지고 기본 셋팅을 통해 추가해 봄. pnpm dlx create-turbo@latest --example with-tailwind( 옵션을 통해 추가하는 방법은 위 cli를 입력해주면 됨. 링크)목적 - 공통으로 쓰일 tailwind config 을 만들어서 각 패키지에 적용시키기turborepo의 공식 문서에서는 패키지 매니저를 pnpm을 추천하여 pnpm으로 진행1. turbo 전역 설치 pnpm install turbo --global2. 초기 셋팅pnpm dlx create-turbo@latest위 명령어를 실행하면 packages 와 apps .. 2024. 12. 11. [Tailwind css] gap , space (feat. Flex) 둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌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.. 2024. 9. 4. 이전 1 다음
