Installation - Tailwind CSS
Tailwind Play
TailwindCSS에서 자주 사용하는 클래스 모음
bg-{color}: 이 클래스는 배경색을 설정하는 데 사용됩니다. {color}는 원하는 색상 값으로 대체되어야 합니다.p-{n}: 이 클래스는 패딩을 설정하는 데 사용됩니다. {n}은 원하는 패딩 크기로 대체되어야 합니다.m-{n}: 이 클래스는 마진을 설정하는 데 사용됩니다. {n}은 원하는 마진 크기로 대체되어야 합니다.w-{n}: 이 클래스는 너비를 설정하는 데 사용됩니다. {n}은 원하는 너비로 대체되어야 합니다.h-{n}: 이 클래스는 높이를 설정하는 데 사용됩니다. {n}은 원하는 높이로 대체되어야 합니다.flex: 이 클래스는 Flexbox 레이아웃을 설정하는 데 사용됩니다. 다른 Flexbox 관련 클래스와 함께 사용하여 레이아웃을 세부 조정할 수 있습니다.
flex-col: 이 클래스는 Flexbox 레이아웃에서 아이템을 수직 방향(위에서 아래로)으로 배열하는 데 사용됩니다.flex-row: 이 클래스는 Flexbox 레이아웃에서 아이템을 수평 방향(왼쪽에서 오른쪽으로)으로 배열하는 데 사용됩니다.justify-{keyword}: 이 클래스는 Flexbox 아이템의 수평 정렬을 설정하는 데 사용됩니다. {keyword}는 원하는 정렬 값으로 대체되어야 합니다. 예를 들어, justify-center는 아이템을 수평 중앙에 배치합니다.items-{keyword}: 이 클래스는 Flexbox 아이템의 수직 정렬을 설정하는 데 사용됩니다. {keyword}는 원하는 정렬 값으로 대체되어야 합니다. 예를 들어, items-center는 아이템을 수직 중앙에 배치합니다.flex-{n}: 이 클래스는 Flexbox 아이템의 성장, 축소 및 기본 크기를 설정하는 데 사용됩니다. {n}은 원하는 flex 값으로 대체되어야 합니다. 예를 들어, flex-1은 아이템이 사용 가능한 공간을 균등하게 차지하도록 합니다.
grid: 이 클래스는 Grid 레이아웃을 설정하는 데 사용됩니다. 다른 Grid 관련 클래스와 함께 사용하여 레이아웃을 세부 조정할 수 있습니다.
grid-cols-{n}: 이 클래스는 그리드 레이아웃에 열의 수를 설정하는 데 사용됩니다. {n}은 원하는 열 수로 대체되어야 합니다. 예를 들어, grid-cols-3는 그리드 레이아웃에 세 개의 열을 만듭니다.col-span-{n}: 이 클래스는 그리드 아이템이 차지하는 열의 수를 설정하는 데 사용됩니다. {n}은 원하는 열 수로 대체되어야 합니다. 예를 들어, col-span-2는 그리드 아이템이 두 열을 차지하도록 합니다.
text-{size}: 이 클래스는 글꼴 크기를 설정하는 데 사용됩니다. {size}는 원하는 글꼴 크기로 대체되어야 합니다. 예를 들어, text-lg는 큰 글꼴 크기를 적용합니다.text-{color}: 이 클래스는 글꼴 색상을 설정하는 데 사용됩니다. {color}는 원하는 색상 값으로 대체되어야 합니다. 예를 들어, text-red-500는 글꼴 색상을 빨간색으로 설정합니다.font-{keyword}: 이 클래스는 글꼴 스타일을 설정하는 데 사용됩니다. {keyword}는 원하는 글꼴 스타일로 대체되어야 합니다. 예를 들어, font-bold는 글꼴을 굵게 만듭니다.border-{color}: 이 클래스는 테두리 색상을 설정하는 데 사용됩니다. {color}는 원하는 색상 값으로 대체되어야 합니다.rounded-{keyword}: 이 클래스는 테두리 둥글기를 설정하는 데 사용됩니다. {keyword}는 원하는 둥글기 값으로 대체되어야 합니다. 예를 들어, rounded-lg는 둥근 테두리를 크게 만듭니다.shadow-{keyword}: 이 클래스는 그림자를 설정하는 데 사용됩니다. {keyword}는 원하는 그림자 스타일로 대체되어야 합니다. 예를 들어, shadow-lg는 큰 그림자를 만듭니다.tracking-{keyword}: 이 클래스는 글자 간격을 설정하는 데 사용됩니다. {keyword}는 원하는 글자 간격 값으로 대체되어야 합니다.