테일 윈드 - 자주 사용한 문법 정리

Tailwind CSS 클래스 이름 정리

1. p-2

• 요소: div, input, button
• 설명: 패딩을 2단계 적용합니다. 주로 요소의 안쪽 여백을 설정하는 데 사용됩니다.

2. flex

• 요소: div
• 설명: 요소를 Flexbox 컨테이너로 만들어줍니다. 요소들을 한 줄 또는 한 열로 정렬할 수 있게 도와줍니다.

3. justify-center

• 요소: div (Flexbox 컨테이너)
• 설명: Flexbox 컨테이너 내에서 자식 요소들을 수평 방향으로 중앙에 정렬합니다.

4. gap-2

• 요소: div (Flexbox 또는 Grid)
• 설명: Flexbox나 Grid 레이아웃에서 자식 요소들 사이의 간격을 설정합니다. 각 요소 사이에 2단계의 간격을 추가합니다.

5. rounded

• 요소: input, button, li
• 설명: 요소의 모서리를 둥글게 만들어줍니다. 버튼이나 입력 필드에 사용되어 부드러운 느낌을 줍니다.

6. border

• 요소: input, button, li
• 설명: 요소에 테두리를 추가하는 클래스입니다. 요소의 스타일을 정의하는 데 사용됩니다.

7. mt-2

• 요소: ul
• 설명: 마진 탑을 2단계 적용합니다. 주로 요소의 위쪽 여백을 설정할 때 사용됩니다.

8. grid

• 요소: ul
• 설명: 요소를 그리드 레이아웃으로 설정합니다. 자식 요소들을 그리드 형식으로 배치할 수 있게 해줍니다.