[TailwindCSS] 자주 사용하는 css className 모음(계속 추가중)

 

자주 사용하는 tailwind class 이름을 정리해보자

이 글에 없는 다른 className을 찾고 싶다면 다음 공식문서에서 확인 할 수 있다: https://tailwindcss.com/

또한, 카카오 엔터 기술블로그에서도 tailwind css 사용기에 대해 정리해두었으니, 흥미가 있는 사람들은 한번 들어가서 보길 추천한다: https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그

 

레이아웃(Layout)

• container: 기본 컨테이너
• flex, inline-flex: Flexbox 레이아웃
• grid: Grid 레이아웃
• block, inline-block: 블록 및 인라인 블록 레이아웃
• hidden: 요소 숨김
• items-center, justify-center: Flexbox 중앙 정렬
• space-x-4, space-y-4: Flexbox 또는 Grid의 간격 조절

크기(Sizing)

• w-full, h-full: 너비 및 높이 전체
• w-1/2, h-1/2: 너비 및 높이 반
• max-w-sm, max-w-md: 최대 너비 설정
• min-h-screen: 최소 높이 화면 크기

패딩 및 마진(Spacing)

• p-4, m-4: 패딩 및 마진
• px-4, py-4: 수평 및 수직 패딩
• mt-4, mb-4, ml-4, mr-4: 개별 방향 마진

타이포그래피(Typography)

• text-xs, text-sm, text-lg, text-xl: 글꼴 크기
• font-thin, font-bold: 글꼴 두께
• leading-none, leading-tight: 줄 높이
• text-left, text-center, text-right: 텍스트 정렬

색상(Colors)

• text-gray-700, bg-blue-500: 텍스트 및 배경색
• hover:bg-blue-700, hover:text-white: 호버 상태 색상
• border-red-500, border-green-500: 테두리 색상

테두리(Border)

• border, border-2: 테두리 두께
• rounded, rounded-full, rounded-lg: 테두리 반경
• border-t, border-b, border-l, border-r: 개별 방향 테두리

그림자 및 배경(Shadow & Background)

• shadow, shadow-md, shadow-lg: 그림자 효과
• bg-cover, bg-center: 배경 이미지 크기 및 위치

상태(Pseudo-classes)

• hover:, focus:, active:: 호버, 포커스, 액티브 상태
• disabled:, visited:, first:, last:: 기타 상태

유연한 크기(Responsive)

• sm:, md:, lg:, xl:, 2xl:: 반응형 크기

 

 

사용 예시

HTML에서는 class를 적고 바로 tailwind 클래스 명을 적어도 되지만 React에서는 className이라고 구분을 해줘야 한다

예시를 통해 알아보자

 

HTML 예시:

<div class="container mx-auto p-4">

  <div class="flex items-center justify-center h-screen">

    <div class="bg-blue-500 text-white p-8 rounded shadow-lg">

      Tailwind CSS 예제

    </div>

  </div>

</div>

React 예시:

function Example() {

  return (

    <div className="container mx-auto p-4">

      <div className="flex items-center justify-center h-screen">

        <div className="bg-blue-500 text-white p-8 rounded shadow-lg">

          Tailwind CSS 예제

        </div>

      </div>

    </div>

  );

}

 

ⓒ clice lee

clicelee의 개발일지 입니다