TailwindCSS 시작하기

서론

프로젝트를 진행하기 전 어떤 스택을 사용할지 정하는데 팀원이 TailwindCSS를 사용하자고 했다. Bootstrap과 같이 사전 정의된 컴포넌트가 있어서 커스텀하는 게 더 불편한 CSS 프레임워크를 생각했기에 처음에는 무한히 길어지는 className이 불편하다고 느꼈지만 프로젝트가 끝난 지금은 Styled-Components가 더 번거롭게 느껴진다.

TailwindCSS란 무엇인가?

Tailwind CSS는 사용자 정의 인터페이스를 신속하게 구축하기 위한 유틸리티 기반의 CSS 프레임워크다. 맞춤 설정 가능한 저수준의 CSS 프레임워크로, 원하는 대로 디자인을 구축할 수 있는 모든 구성 요소를 제공한다.

<출처: TailwindCSS 공식 사이트>
위의 gif를 보면 어떻게 사용하는지 간단하게 알 수 있다.

Tailwind CSS는 기존의 CSS 접근법과는 다른 접근법을 사용하고 있는데, 미리 정의된 많은 수의 작은, 재사용 가능한 클래스를 제공하고, 이들 클래스를 조합함으로써 복잡한 디자인을 생성한다. 이런 방식으로 작동하는 이유는, 복잡한 디자인 시스템을 구축하고 유지 관리하는 데 필요한 모든 빌딩 블록을 제공하면서, 자유롭게 조합하여 무한한 디자인 변형을 할 수 있도록 해주기 때문이다.

왜 TailwindCSS를 쓰는가?

• 사용자 지정 CSS를 더 적게 작성할 수 있다.
  Tailwind CSS는 'utility-first' 스타일의 프레임워크로, 많은 수의 유틸리티 클래스를 제공한다. 이 클래스들은 공통적으로 사용되는 CSS 속성들을 간결하게 표현한 것들이며, 개발자들이 이러한 클래스들을 조합하여 사용하면, 매번 새로운 CSS를 작성할 필요 없이 원하는 디자인을 빠르게 구현할 수 있다.
• 클래스 이름을 지을 필요가 없다.
  일반 CSS 방식에서는 종종 적절한 클래스 이름을 정하는 것이 어려울 수 있다. 클래스 이름을 정하는 것은 많은 시간을 소비하게 만들며, 때로는 혼란을 불러일으킬 수 있다. 하지만 Tailwind CSS에서는 사전 정의된 클래스를 사용하기 때문에 이런 고민을 할 필요가 없다.
• 반응형 디자인을 더 쉽게 할 수 있다.
  클래스 이름에 sm:, md:, lg:, xl: 등의 접두사를 추가함으로써, 다양한 화면 크기에 대응하는 스타일을 쉽게 지정할 수 있다. 이는 개발자가 미디어 쿼리를 직접 작성하지 않아도 되므로, 개발 시간을 단축하고 코드의 가독성을 향상시킨다.

* 아래는 tailwind cheatsheet으로 처음에 익숙하지 않았을 때 검색해가면서 잘 썼다.
https://tailwindcomponents.com/cheatsheet/

참고 자료

• Introduction to Tailwind CSS
• Tailwind CSS: What It Is, Why Use It & Examples