Tailwind 메모 정리

설치

npm install -D tailwindcss

globals.css 파일에 @import "tailwindcss" 집어넣기

 

 

자주 쓰이는 표현 예시들

p-6 = 모든 방향 패딩 1.5rem (6 * 0.25rem)

max-w-sm = 최대 너비 small

mx-auto = 좌우 마진 auto (가운데 정렬)

bg-white rounded-xl shadow-lg = 배경 흰색, 모서리 둥굴게, 큰 그림자

flex items-center space-x-4 = flexbox 레이아웃, 수직 중앙 정렬, 자식요소 간 수평 간격

hover:bg-purple-600 = 마우스 호버 시 배경색 변경

focus:ring-2 = 포커스 시 링(테두리) 효과

 

 

조건부 클래스 적용

clsx 사용

npm install clsx 로 설치

 

import clsx from 'clsx';

 

function MyButton({ isPrimary, isActive, children }) {

   const buttonClasses = clsx(

      'px-4 py-2 font-semibold rounded-md transition-colors',

      {

         'bg-blue-500 text-white hover:bg-blue-700': isPrimary,

         'bg-gray-200 text-gray-700 hover:bg-gray-300': !isPrimary,

         'ring-2 ring-offset-2 ring-blue-500': isActive,

      }

   );

   return <button className={buttonClasses}>{children}</button>;

}

 

 

padding, margin

 

font

 

font-size

 

font 수정

 

font

 

border-radius

 

 

그림자 효과

 

 

hover