Basic

Tailwind

유틸리티 기반의 CSS 프레임워크

Tailwind vs Boostrap

사용 방법

기본 사용

Tailwind vs Boostrap

사용 방법

CDN 방식

Tailwind - Margin & Padding

Margin & Padding

tailwind 에서 margin 과 padding 은 상(top), 하(bottom), 좌(left), 우(right) 네 방향으로 지정할 수 있습니다. 또한 x축(좌, 우), y축(상, 하)을 묶어서 지정하거나 네 방향 전부를 지정할 수 있습니다.

방향 : top, bottom, left, right

크기 : 기본값 1의 값이 0.25rem (4px)로 설정

Tailwind - Margin & Padding

Tailwind - Border

border

기본값

테두리 두께

테두리 색상

테두리 스타일

테두리 방향

border-radius

border

border 는 테두리 스타일 속성이며, tailwind 에서는 스타일 클래스로 지정되어 있습니다. class 에 border 만 작성해도 기본 테두리를 지정할 수 있습니다.

Tailwind - Border

Tailwind - flex

flex 는 Container 에 item 을 배치하는 방법을 지정하여 유연한 레이아웃을 적용시키는 레이아웃입니다.

컨테이너 : 배치할 UI 요소를 담는 박스

아이템 : 배치 및 정렬할 요소

tailwind 에서는 flex 클래스를 적용하여, 특정 요소를 flex 컨테이너를 지정할 수 있습니다.

FLEX 카드뷰 레이아웃

Tailwind - flex

Tailwind - Button 버튼

tailwind 로 Button UI 를 만들어 봅니다.

기본 버튼

테두리 버튼

버튼 사이즈

블록 버튼

아이콘 버튼

기본 버튼

Tailwind - Button 버튼

Tailwind - Switch 스위치

tailwind 로 Switch UI 를 만들어 봅니다.

Tailwind - Switch 스위치

Tailwind - Card

tailwind 로 Card UI 를 만들어 봅니다.

카드뷰

기본 카드

이미지 카드

반응형 카드

Tailwind - Card

Tailwind - Table 테이블

tailwind 로 Table 을 만들어봅니다.

PC : 고객명, 전화번호/이메일, 가입일자, 상태, (더보기)

Tailwind - Table 테이블

Tailwind - Form 입력폼

tailwind 를 이용하여 입력폼 UI 를 만들어봅니다.

Tailwind - Form 입력폼

Tailwind - Sign in 로그인

Tailwind - hover

hover:스타일클래스 사용하면, hover(마우스를 올린) 상태일 때 스타일을 적용할 수 있습니다.

일반적인 CSS 에서는 :hover 가상 선택자로 스타일 속성을 지정하여 hover 상태일 때 스타일링을 할 수 있습니다.

tailwind 에서는 hover:스타일클래스 형태로 hover 상태일 때 스타일을 지정할 수 있습니다.

버튼, 링크, 카드, 이미지, 아이콘, 탭 등의 UI 요소에 hover 스타일을 적용하면 사용자에게 더 직관적인 UI 를 제공할 수 있습니다.

Tailwind - hover

Tailwind - focus

Tailwind - Responsive 반응형