코드로 확인해보면,

<body>
    <div class="bg-blue-500">Hello, world!</div>
  </body>

위 코드에서, div class에 red를 추가하면 red가 적용됩니다.

<body>
    <div class="bg-blue-500 bg-red-500">Hello, world!</div>
 </body>

하지만 둘의 순서를 바꿔봐도 여전히 red가 적용됩니다.

<body>
    <div class="bg-red-500 bg-blue-500">Hello, world!</div>
 </body>

분명 blue가 더 뒤에 위치하고 있는데, 그 이유가 뭘까요?

Tailwind CSS의 clsss는 구성 파일에서 특정 순서로 정의됩니다.

한 요소에 동일한 유형의 두 class를 부여하여 충돌이 발생하면, 생성된 CSS 순서로 인해 구성 파일의 뒷부분에 정의된 클래스가 우선합니다. CSS는 후자 우선순위 원칙을 따르기 때문입니다.

Tailwind CSS는 알파벳 순서로 class 이름을 부여합니다. 따라서 HTML 요소에 class를 적용할 때, class 이름의 알파벳 순서대로 스타일이 적용됩니다. 아래 코드를 살펴봐주세요.