[Tailwind] - Tailwind CSS의 유틸리티 클래스 이해하기: 대괄호와 비대괄호의 차이

Tailwind CSS에서 유틸리티 클래스에 대괄호 []를 사용하면 맞춤 또는 동적 값을 적용할 수 있는 반면,
대괄호를 사용하지 않으면 사전 정의된 표준 유틸리티 값을 사용할 수 있습니다.

 

대괄호 []를 사용하지 않는 예시 (사전 정의된 클래스 사용)

이 경우, Tailwind의 사전 정의된 값을 사용하여 너비, 배경색, 패딩 등을 설정합니다.

<div class="w-32 h-16 bg-blue-500 p-4"> 사전 정의된 유틸리티 클래스 </div>

• w-32: 너비를 8rem(128px)으로 설정합니다.
• bg-blue-500: 사전 정의된 파란색을 배경색으로 적용합니다.
• p-4: 1rem(16px)의 패딩을 추가합니다.

 

---

대괄호 []를 사용하는 예시 (맞춤 값 사용)

여기서는 []를 사용하여 Tailwind가 기본적으로 정의하지 않은 맞춤 값을 적용합니다.

<div class="w-[200px] h-[100px] bg-[#3692FF] p-[10px]"> 맞춤 유틸리티 클래스 </div>

• w-[200px]: 너비를 정확히 200px로 설정합니다.
• bg-[#3692FF]: 배경색으로 맞춤 헥스 색상 #3692FF를 적용합니다.
• p-[10px]: 10px의 맞춤 패딩을 추가합니다.

 

언제 각각을 사용해야 할까 ?

• 대괄호 없이 사용: Tailwind의 일관된 디자인 시스템을 활용할 수 있을 때 이상적입니다. 이는 디자인을 확장 가능하고 일관성 있게 유지하는 데 도움이 됩니다.
• 대괄호를 사용: 표준 Tailwind 스케일에 포함되지 않은 정확하고 특정한 값이 필요할 때 사용합니다. 예를 들어, 비표준 크기나 맞춤 색상을 설정할 때 유용합니다.