Tailwind

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

Tailwind

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

Tailwind vs Boostrap

사용 방법

CDN 방식

Node.js CLI 방식

React 세팅

기본 사용

메인 화면

로그인 화면

Tailwind - Margin & Padding

Margin & Padding

Tailwind - Margin & Padding

Tailwind - Border

border

기본값

테두리 두께

테두리 색상

테두리 스타일

테두리 방향

Tailwind - Border

Tailwind - flex

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

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

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

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 을 만들어봅니다.

Tailwind - Table 테이블

Tailwind - Form 입력폼

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

Tailwind - Form 입력폼

Tailwind - Sign in 로그인

Tailwind - hover

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

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

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

Tailwind - hover

Tailwind - focus

Tailwind - Responsive 반응형