Tailwind CSS란?

Tailwind CSS는 프론트엔드 개발 속도를 높이기 위해 설계된 유틸리티 우선의 CSS 프레임워크입니다. 클래스를 사용하여 레이아웃, 색상, 간격, 타이포그래피, 그림자 등을 HTML 내에서 직접 조절할 수 있습니다. 즉, 많은 양의 CSS를 작성하지 않고도 요소의 스타일을 조정할 수 있습니다. 쉽게 조합해 원하는 웹사이트를 만들 수 있는 빌딩 블록이 있는 것과 같은 것입니다.

Tailwind CSS 제작자들은 Tailwind UI라는 Tailwind의 컴포넌트와 패턴이 미리 구축된 라이브러리를 개발하여 사용자가 자신의 프로젝트에 복사할 수 있도록 했습니다.

이 라이브러리는 Merge 라이브러리에도 통합되어 있습니다.

Tailwind UI 라이브러리

<aside> 📎 비고 Tailwind UI는 현재 베타 버전입니다.

</aside>

UXPin에 내장된 Tailwind UI 라이브러리는 Merge 라이브러리로 통합되어 완전히 커스터마이징 및 테마 설정이 가능합니다. 이 통합을 통해 Tailwind CSS의 뛰어난 기능과 유연성을 프로토타이핑 워크플로우에 직접 적용할 수 있습니다. 현재 18개의 컴포넌트와 요소를 사용할 수 있습니다. 또한, 편리한 컴포넌트 다이어그램과 패턴도 제공됩니다.

1.mp4

커스텀 컴포넌트

Tailwind UI에서는 Tailwind CSS 컴포넌트의 HTML 코드를 기반으로 커스텀 Tailwind 컴포넌트를 만들 수 있습니다. 이 컴포넌트들은 완전히 커스터마이징이 가능합니다.

2.mp4

<aside> 📎 비고 JavaScript가 필요한 컴포넌트는 컴포넌트 생성 과정에서 JavaScript 코드가 삭제되기 때문에 UXPin 업로드 후 제대로 작동하지 않을 수 있습니다.

</aside>

또한 AI Component Creator를 사용하여 UXPin 라이브러리용 커스텀 컴포넌트를 생성할 수도 있습니다.

글로벌 및 로컬 테마 소품

Tailwind UI에는 글로벌 및 로컬 테마가 모두 지원됩니다.

Zeg1QP_jD4D4xSmh_05.avif

글로벌 테마: 글로벌 테마를 설정하여 전체 페이지에 반영함으로써 디자인의 일관성을 유지할 수 있습니다.

로컬 테마: 로컬 테마 속성을 설정하여 테마 변경 사항을 특정 페이지에만 적용할 수 있어 디자인 커스터마이징에 유연성을 부여할 수 있습니다.

기타 리소스

Heroicons - Tailwind CSS 제작진이 직접 제작한 아름다운 SVG 아이콘은 Icon 컴포넌트 및 속성에 사용할 수 있으며, SVG를 복사하여 컴포넌트 및 속성에 붙여넣기만 하면 됩니다!