[Tailwind CSS] 자주 사용되는 테일윈드 CSS 클래스 정리

자주 사용되는 테일윈드 CSS 클래스 정리

들어가며

• 테일윈드(Tailwind) CSS에서 자주 사용되는  클래스들을 정리해본다.

 

자주 사용되는 클래스들

레이아웃(Layout)

• container: 반응형 컨테이너를 설정

<div class="container mx-auto">

• mx-auto: 수평 중앙 정렬

<div class="mx-auto">

• flex: Flexbox 컨테이너 생성

<div class="flex">

• grid: 그리드 레이아웃 설정

<div class="grid grid-cols-3 gap-4">

• space-x-*: 자식 요소 간의 가로 간격 설정 (수평)

<div class="space-x-4">

• space-y-*: 자식 요소 간의 세로 간격 설정 (수직)

<div class="space-y-4">

 

정렬(Alignment)

• text-center: 텍스트를 중앙 정렬

<p class="text-center">

• items-center: Flexbox 또는 Grid에서 요소를 수직 중앙 정렬

<div class="flex items-center">

• justify-center: Flexbox 또는 Grid에서 요소를 수평 중앙 정렬

<div class="flex justify-center">

 

간격(Spacing)

• p-*: 전체 패딩 적용

<div class="p-4">

• px-*: 좌우 패딩 적용

<div class="px-4">

• py-*: 상하 패딩 적용

<div class="py-4">

• m-*: 전체 마진 적용

<div class="m-4">

• mx-*: 좌우 마진 적용

<div class="mx-4">

• my-*: 상하 마진 적용

<div class="my-4">

 

크기(Sizing)

• w-*: 너비 설정

<div class="w-64">  <!-- (16rem (256px)) -->

• h-*: 높이 설정

<div class="h-32">   <!-- (8rem (128px)) -->

• max-w-*: 최대 너비 설정

<div class="max-w-7xl">

• max-h-*: 최대 높이 설정

<div class="max-h-96">

• min-w-*: 최소 너비 설정

<div class="min-w-full">

• min-h-*: 최소 높이 설정

<div class="min-h-screen">

 

색상(Colors)

• bg-*: 배경 색상 설정

<div class="bg-blue-500">

• text-*: 텍스트 색상 설정

<p class="text-gray-700">

• border-*: 테두리 색상 설정

<div class="border border-red-500">

• hover:*: 마우스 오버 시 스타일 변경

<button class="bg-blue-500 hover:bg-blue-700">

 

테두리(Border)

• border: 기본 테두리 설정

<div class="border">

• border-*: 특정 방향의 테두리 설정
  • 예) border-t, border-b, border-l, border-r
    • @t@ : top
    • @b@ : bottom
    • @l@ : left
    • @r@ : right

<div class="border-t border-blue-500">

• rounded: 테두리 반경 설정(둥글게)

<div class="rounded-lg">

 

그림자(Shadows)

• shadow: 기본 그림자 효과

<div class="shadow">

• shadow-md: 중간 크기 그림자

<div class="shadow-md">

• shadow-lg: 큰 그림자

<div class="shadow-lg">

 

반응형 디자인(Breakpoints)

• sm, md, lg, xl, 2xl 속성들을 사용하여 특정 화면 크기 이상에서만 적용될 스타일을 설정할 수 있다.
  • @sm@ : 작은 화면 (모바일), 640px
  • @md@ : 중간 크기 화면 (태블릿), 768px
  • @lg@ : 큰 화면, 1024px
  • @xl@ : 더 큰 화면, 1280px
  • @2xl@ : 초대형 화면, 1536px

<div class="sm:bg-red-500 md:bg-green-500 lg:bg-blue-500">

 

타이포그래피/Typography)

• text-*: 텍스트 크기 설정

<p class="text-lg">

• font-bold: 텍스트를 굵게 설정

<p class="font-bold">

• tracking-*: 문자 간격 설정

<p class="tracking-wider">

• leading-*: 줄 간격 설정

<p class="leading-relaxed">

 

디스플레이(Display)

• block: 블록 요소 설정

<div class="block">

• inline-block: 인라인 블록 요소 설정

<span class="inline-block">

• hidden: 요소 숨기기

<div class="hidden">

• flex: Flexbox 설정

<div class="flex">

• grid: Grid 레이아웃 설정

<div class="grid">

 

기타 유용한 클래스들

• opacity-*: 불투명도 설정

<div class="opacity-75">

• z-*: z-index 설정

<div class="z-10">

• cursor-pointer: 마우스 커서를 포인터로 변경

<div class="cursor-pointer">

• overflow-*: 요소의 넘침 처리 설정(예: overflow-hidden, overflow-auto)

<div class="overflow-hidden">

 

기타

• 기타 다양한 클래스들은 아래의 공식 문서를 참고한다.

Installation - Tailwind CSS