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 장점

  • Name
    유연성과 커스터마이징
    Type
    Description

    Tailwind CSS는 디자인 시스템을 적용하기에 아주 유연합니다. 필요한 스타일을 직접 지정하여 프로젝트에 맞게 커스터마이징할 수 있습니다.

  • Name
    최적화
    Type
    Description

    Tailwind CSS는 유연성을 유지하면서도 불필요한 CSS를 생성하지 않고, 작은 파일 크기로 유지됩니다. 이는 웹 페이지 로딩 속도를 향상시켜 줍니다.

  • Name
    빠른 개발 속도
    Type
    Description

    Tailwind CSS의 유틸리티 클래스들은 자주 사용되는 디자인 패턴과 구성 요소를 빠르게 작성할 수 있도록 도와줍니다. 이로 인해 개발 속도가 향상됩니다.

  • Name
    문서화와 지원
    Type
    Description

    Tailwind CSS는 잘 구성된 문서화를 제공하며, 커뮤니티와 지원이 활발하여 빠르게 도움을 얻을 수 있습니다.

tailwind

Tailwind CSS 단점

  • Name
    학습 곡선
    Type
    Description

    우선 기본적으로 기존 CSS를 학습해야 사용이 가능하고, 기존 CSS 프레임워크와도 다른 점이 많기 때문에 Tailwind CSS를 처음 사용하는 개발자들은 학습 곡선을 겪을 수 있습니다.

  • Name
    HTML 가독성
    Type
    Description

    클래스 기반 접근 방식은 HTML 코드가 복잡해질 수 있습니다. 일부 개발자들은 이를 지저분하게 느낄 수 있습니다.

  • Name
    오버클래스 사용
    Type
    Description

    Tailwind CSS의 유틸리티 클래스들은 필요 이상으로 많은 클래스를 HTML 요소에 추가할 수 있습니다. 이로 인해 코드가 더 복잡해지고 유지보수가 어려워질 수 있습니다.

tailwind2

Tailwind CSS 정리

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

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

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

  • Tailwind CSS를 사용할 경우 다른 UI 프레임워크와 함께 사용하는 것은 권장되지 않습니다. 이런 경우 스타일 충돌이 발생할 가능성이 있으며, 일관성 없는 디자인 결과를 초래할 수 있습니다.