Tailwind

Tailwind

Introduction

Tailwind CSS : Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 다양한 스타일 클래스를 제공하여 HTML 요소에 쉽게 스타일을 적용할 수 있도록 한다. 이 프레임워크는 클래스를 조합하여 원하는 스타일을 만들 수 있기 때문에, 커스텀 CSS를 작성하는 것보다 빠르고 일관된 스타일링이 가능함.

주요 특징

유틸리티 클래스: Tailwind CSS는 미리 정의된 유틸리티 클래스를 제공한다. 예를 들어, 텍스트 색상, 배경색, 간격, 테두리 등을 설정하는 클래스를 사용할 수 있음

반응형 디자인: Tailwind CSS는 반응형 디자인을 쉽게 구현할 수 있는 유틸리티 클래스를 제공해, 다양한 화면 크기에 따라 스타일을 적용할 수 있다.

모듈성: Tailwind CSS는 필요한 유틸리티만 포함하도록 설정할 수 있어, 최종 CSS 파일의 크기를 최소화할 수 있다. 이는 purge 설정을 통해 불필요한 CSS를 제거함으로써 가능해짐.

커스터마이징: Tailwind CSS는 구성 파일(tailwind.config.js)을 통해 쉽게 커스터마이징할 수 있다. 테마 설정, 색상 팔레트, 간격, 폰트 등을 사용자 정의할 수 있다.

플러그인: Tailwind CSS는 다양한 플러그인을 통해 기능을 확장할 수 있다. 예를 들어, 폼 스타일링, 타이포그래피, 애니메이션 등을 쉽게 추가할 수 있다.

Tailwind를 사용중인 회사 : Open AI, ChatGPT, Shopify, Netflix, Loom, Lalacorn, Verge, Wonder, Github, New York Times 등

IntelliSense

• Tailwind CSS IntelliSense를 VSC에 설치
• tailwind.config.ts 코드 일단 정리 (theme: { }으로 비워두기)
• ⌘ + i : 자동완성 강제로 트리거

Card Component

• 전체를 이루는 컨테이너 <div>작성
• row <div>작성
• 내용 넣어주기
• column 작성(세로 방향)
• justify-between : Flexbox의 정렬 속성 중 하나로, 컨테이너의 자식 요소들을 양쪽 끝으로 배치. 이를 통해 두 자식 요소가 가능한 한 멀리 떨어져 위치하게 된다.
• relative : relative 위치 지정은 요소의 위치를 그 요소가 원래 있어야 할 위치를 기준으로 조정한다. 즉, relative로 지정된 요소는 기본 위치에 배치되고, 추가로 top, right, bottom, left 속성을 사용하여 이동할 수 있다.
• absolute : absolute 위치 지정은 요소를 가장 가까운 위치 지정된 조상 요소(즉, relative, absolute, fixed, sticky가 적용된 조상 요소)를 기준으로 위치를 지정한다. 만약 그러한 조상 요소가 없다면, 뷰포트(브라우저 창)를 기준으로 위치가 지정된다.