FrontEnd Styling: Tailwind CSS 사용해보기

Tailwind CSS는 클래스 기반의 유틸리티(utility) CSS 프레임워크로, HTML 요소에 직접 적용되는 클래스들을 제공합니다. 각 클래스는 개별적인 스타일을 담당하며, 이러한 유틸리티 클래스들을 조합하여 레이아웃, 텍스트 스타일링, 반응형 디자인, 그리드 시스템 등을 쉽게 구축할 수 있습니다.

Tailwind CSS를 선택할지 여부는 프로젝트의 특성과 개발 팀의 선호도에 따라 다를 수 있습니다. 현대적이고 유연한 스타일링을 원하고 빠른 개발 속도와 커스터마이징이 중요한 경우 Tailwind CSS는 매우 유용한 선택일 수 있습니다.

 

설명

Tailwind CSS는 사용자 인터페이스를 빌드하기 위한 현대적이고 유연한 CSS 프레임워크입니다. 특징적인 점은 프리스타일드(CSS 클래스를 미리 정의하지 않고도 바로 스타일링 가능) 방식을 채용하여 웹 개발자들에게 높은 수준의 커스터마이징과 재사용성을 제공합니다. 즉, 특정한 클래스 이름으로 스타일을 적용하는 것이 아니라, 필요한 스타일을 직접 지정하는 방식으로 작업할 수 있습니다.

 

className = 'flex rounded-lg border border-gray-700'

 

Tailwind CSS 장점

• 유연성과 커스터마이징: Tailwind CSS는 매우 유연하여, 필요한 스타일을 직접 지정하여 프로젝트에 맞게 커스터마이징할 수 있습니다.
• 최적화: 불필요한 CSS 생성 없이 작은 파일 크기를 유지하며, 웹 페이지 로딩 속도를 향상시킵니다.
• 빠른 개발 속도: 유틸리티 클래스들을 통해 자주 사용되는 디자인 패턴과 구성 요소를 빠르게 작성할 수 있어 개발 속도가 향상됩니다.
• 문서화와 지원: 잘 구성된 문서화와 활발한 커뮤니티 지원을 통해 사용자는 빠르게 도움을 받을 수 있습니다.

 

Tailwind CSS 단점

• 학습 곡선: Tailwind CSS 사용을 위해서는 기본적인 CSS 지식이 필요하며, 기존 CSS 프레임워크와 다른 점이 많아 새로운 사용자들은 초기 학습 과정에서 어려움을 겪을 수 있습니다.

• HTML 가독성: Tailwind CSS의 클래스 기반 접근 방식으로 인해 HTML 코드가 복잡해지고 일부 개발자들은 이를 지저분하다고 느낄 수 있습니다.

• 오버클래스 사용: 유틸리티 클래스의 과도한 사용은 HTML 요소에 많은 클래스를 추가하게 하여 코드를 복잡하게 만들고 유지보수를 어렵게 할 수 있습니다.

Tailwind CSS 정리

우선 단점에 작성된 HTML 가독성 문제에 있어서, 개인적으로 별도의 style.css파일로 분리하지 않아도 된다는 점이 저에게는 매력적으로 다가왔습니다. 따라서 개발자 성향과 취향에 따라 단점이 될 수도, 장점이 될 수도 있다고 생각합니다.

제공받을 수 있는 Components가 다양하고, 직접 개발 난이도가 적당하기 때문에, 빠른 개발에 있어서 적합한 CSS라고 판단됩니다. 하지만 이런 Tailwind CSS도 기존 CSS 기초 지식 없이는 사용이 제한될 수 있습니다. 기존 CSS 학습과 더불어 Tailwind CSS만의 코드를 새로 학습해야하기 때문에, 추가적인 학습이 필요합니다.

Tailwind Docs 제공됩니다. 커뮤니티와 지원도 Redit, Discord에서 활발하기 때문에 쉽게 도움을 얻을 수 있습니다.