[React][TailwindCSS][유용한 툴] HyperUI - 무료 Tailwind 컴포넌트

# HyperUI - 무료 오픈소스 Tailwind CSS 컴포넌트 활용 방법

- Tailwind CSS는 가장 핫한 CSS 프레임워크 중 하나입니다. 하지만, 다른 UI 프레임워크들과는 다르게 직접적으로 컴포넌트를 제공하지 않기 때문에, 실제로 활용을 하려면 Headless UI와 같은 보조 라이브러리나 컴포넌트, 예시들이 필요한 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 HyperUI를 소개하려고 합니다

 

# HyperUI 사이트

https://www.hyperui.dev/

Free Open Source Tailwind CSS Components | HyperUI

 

# 활용 방법

- HyperUI는 컴포넌트의 예시들과 그 코드를 쉽게 가져다 사용 할 수 있는 사이트이므로, 활용방법은 아주 간단합니다. HyperUI 웹 사이트에 접속 후, Marketing, eCommerce, Application UI 중에서 원하는 카테고리를 고르신 후에, 보이는 예시 중 필요한 것을 선택하시면 됩니다. 

- 만약 아래와 같이 회원 가입 양식의 예시를 선택하였다면, View를 눌러서, 해당 코드 확인하고, 복사하신 후에 적절하게 활용하시면 됩니다. 참고로 React에서 사용하시는 경우 우측 상단의 JSX 버튼을 통해 추가 수정 없이 사용하실 수 있습니다

 

# 마치며

- HyperUI의 컴포넌트들을 실제 프로젝트에서 활용하려다 보니 그대로 사용하기에는 기존 UI와 어울리지 않는 부분이 있다보니, 추가적인 수정이 필요했습니다. 그리고 Tailwind 특유의 복잡한 className은 수정할 부분을 찾는데 시간이 걸리는 단점이 있었습니다. 결론적으로 새로 구현하는 컴포넌트에 대해서 발췌해서 적용하는 형태로 활용하시는 것을 추천드립니다.

---