Tailwind CSS

쉬운 설명

미리 정의된 작은 유틸리티 클래스를 조합해 화면 스타일을 만드는 CSS 프레임워크.

실제로는 이렇게 만나요

`grid gap-4 md:grid-cols-2`처럼 기본 한 열 배치를 중간 화면부터 두 열로 바꿀 수 있습니다.

• 이런 거 할 때 나와요 별도 CSS 파일을 오가며 클래스 이름을 만들지 않고도 컴포넌트 안에서 빠르게 레이아웃과 반응형 스타일을 구성할 수 있습니다.
• 이렇게 생겼어요 Tailwind CSS은(는) CSS, Design Token, Responsive Web 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
• 나오는 화면 예시 웹 기본 작업을 하다가 CSS, Design Token, Responsive Web를 확인하는 화면

헷갈리기 쉬운 점

클래스가 지나치게 길어지거나 같은 조합이 반복되면 컴포넌트로 묶고 디자인 토큰을 정리해야 합니다.

왜 알아두면 좋을까요?

별도 CSS 파일을 오가며 클래스 이름을 만들지 않고도 컴포넌트 안에서 빠르게 레이아웃과 반응형 스타일을 구성할 수 있습니다.