Tailwind 간단 정리

이번 프로젝트에서 tailwind를 사용했다.
간단하게 정리해봤다.

화면 너비에 따라 css 다르게 주기

css, scss에 비해 간단하게 반응형 스타일링을 할 수 있다.

• /* css */
  @media (max-width: 640px) {
    .gallery {
      color: 1fr 1fr;
    }
  }
  
  .gallery {
      display: grid;
      grid-templeate-columns: 1fr 1fr 1fr 1fr;
  }

• /* tailwind */
  <Gallery className="grid grid-cols-2 md:grid-cols-4"/>

위를 활용해 가장 많이 사용한 방법들은 다음과 같다.

1) Sidenav 반응형

일반적으로 cms 사이트에서 태블릿, pc는 sidenav가 보이지만, 모바일에서는 가로가 좁아서 숨기고 헤더에서 목록 버튼을 클릭해 볼 수 있게 한다.

tailwind를 사용해 간단하게 처리할 수 있다.

<Sidenav className="hidden md:block"/>

목록 눌렀을 때 보여지는 것은 Sidenav 컴포넌트를 재활용해서 왼쪽 세로를 다 차지하는 모달(shadcn/ui는 sheet로 명명)을 활용한다.

2) 이미지 갤러리 반응형

이미지 갤러리의 가로 1줄에 나오는 이미지 개수를 화면 너비에 따라 적절하게 조정한다.

<Gallery className="grid grid-cols-2 md:grid-cols-4" />

3) 버튼 반응형

버튼 안 내용을 화면 크기에 따라 조정한다.

<Button><PlusIcon/> <span className="hidden md:block">추가</span></Button>

화면 특정 영역 제외한 영역 꽉 채우기

<container className="flex w-full h-screen">
      <div className="h-[40px]"></div>
      <div className="flex-1"></div>
</container>

<container className="grid w-full h-screen grid-rows-[40px_auto]">
      <div></div>
      <div></div>
</container>

eslint 플러그인, vscode extensions

tailwind로 작업할 때 유용한 친구들이다.

• eslint-plugin-tailwindcss: className 자동 정리 lint
• tailwind css intellisense: vscode에서 className 자동완성
• tailwind fold: vscode에서 className 숨겨둠. tailwind 의 단점인 가독성 안 좋은 부분을 해결

tailwind 사용 후기

• 장점
  • css, css-in-js에 비해 작업속도가 매우 빠르다. 왔다 갔다 하는 시간이 없어서 작업시간이 매우 빨라진다.
  • 반응형 디자인이 간편하다.
• 단점
  • 진입장벽이 좀 있다. 처음에는 docs를 계속 보면서 했다.