"[ 기존 css ] : tailwindCss 사용 예시" 형태로 작성했다.
크기 / 간격 및 배경
[ width ] : w-12 , w-1/2(50%)
[ max-width ] : max-w-sm
[ height ] : h-12
[ padding ] : p-6
[ padding-top ] : pt-0
[ padding-bottom ] : pb-0
[ padding-top + padding-bottom ] : py-10
[ margin ] : m-10
[ margin-left + margin-right ] : mx-auto
[ background color ] : bg-white
border
[ border-width ] : border-3
[ border-color ] : border-black
[ border-radius ] : rounded-xl , rounded-full
[ box-shadow ] : shadow-lg
flex
[ display: flex ] : flex
[ flex-direction : row ] : flex-row
[ flex-wrap: wrap ] : flex-wrap
grid
[ display: grid ] : grid
[ grid-column: auto ] : col-auto
fles, grid 공통
[ justify-content: center ] : justify-center
[ align-times: center ] : items-center
[ gap ] : gap-4
[ column-gap ] : gap-x-5
[ row-gap ] : gap-y-5
font
[ font-size ] : text-xl
[ text-color ] : text-black
[ font-weight ] : font-medium
화면 크기
breakpoint prefix를 붙이지 않으면 모바일크기에 적용된다.
참조