[tailwind] utility클래스의 우선순위 적용문제

 

 

문제 상황 : 

현재 페이지의 path별로 nav바에 스타일을 적용하는 중이다. 

 util 클래스인 nav-hover를 path에 따라 return하여 적용하였으나 스타일이 적용되지 않았다. 

 

 

아래는 nav바의 목록이다. 

    <ul className="flex h-[72px] items-center justify-between gap-1">
      <Button href="/add" className={`${isFocused('add')} nav-button`}>
        <li>추가</li>
      </Button>
      <Button href="/search" className={`${isFocused('search')} nav-button`}>
        <li>검색</li>
      </Button>
      <Button href="/food" className={`${isFocused('food')} nav-button`}>
        <li>식재료</li>
      </Button>
      <Button href="/receipt" className={`${isFocused('receipt')} nav-button`}>
        <li>영수증</li>
      </Button>
    </ul>

 

 

 

문제의 원인 : 

 

 

next에서 제공하고 있던 전역 css스타일

문제는 위의 layout.css파일에서 [type='button']인 것들이 모두 적용되고 있었다. 

 

layout.css파일의 위치는

 

다음과 같았다. 실제로 해당 파일의 위치에 들어가보니 해당 스타일이 적용되어 있었다. 

 

 

 

 

 

css우선순위 

 

 

출처 : 

Specifishity :: Specificity with Fish

 

 

아래로 내려갈 수록 우선순위가 높다.

내가 적용 한 것은 클래스 선택자였다. 

 

@layer components {
  .nav-button {
    @apply hover:nav-hover h-[72px] w-[91px] rounded-tl-[7px];
  }
}

 

클래스 선택자는 속성 선택자보다 우선순위가 낮다. 

그러므로 [type='button']에서 적용되어있는

background-color:transparent스타일이 

우선순위가 높게 적용되었던 것이다. 

 

해결방법 

 

element.class로 명시하여 스타일을 구체화하고 우선순위를 높였다. 

  button.nav-button {
    @apply hover:nav-hover h-[72px] w-[91px] rounded-tl-[7px];
  }