tailwindcss 4 클릭 가능한 요소 위에서 마우스 커서 안 바뀌는 문제 해결법

이번에야말로 filament 5를 설치하려고 했는데, 또 그전에 해결하고 싶은 것이 생겼다.

filament 5 설치를 위해 tailwindcss를 4로 업그레이드했었는데, 그 후에 UI에 뭔가 거슬리는 부분이 생긴 것이다.

이전 포스트

라라벨 프로젝트에서 Livewire를 버전 4로 업그레이드

라라벨 프로젝트에서 Livewire 버전을 3에서 4로 수동 업그레이드하는 가이드입니다. Volt 컴포넌트를 내장 단일 파일 구성 요소로 마이그레이션하는 과정부터, 웰컴 페이지 호출 변경법, 대시보드 진입 시 발생하는 캐시 에러를 해결하는 법을 공유합니다.

드롭다운 메뉴나 버튼에 마우스를 올려도 커서 모양이 바뀌지 않는다

마우스 커서는 보통 화살표처럼 생긴, 꽃삽처럼 보이기도 하는 모양이다.

그런데 클릭이 가능한 요소 위에 마우스를 가져다 놓으면 커서 모양이 검지 손가락만 펼친 손모양으로 바뀐다. 👆

하지만 tailwindcss를 4로 업그레이드한 후부터 이 이미지에 표시해 놓은 부분에 마우스를 올려놔도 마우스 커서 모양이 바뀌지 않는다.

이 요소들의 공통점은 전부 <button> 태그다.

클릭이 가능한 요소들인데 마우스 커서 모양은 바뀌지를 않으니, 사용자에게 혼란을 줄 가능성이 있다.

특히 드롭다운 메뉴에서 '프로필'은 마우스 커서가 바뀌는데, '로그아웃'은 바뀌지 않는 게 너무 이상하게 느껴진다.

같은 드롭다운 메뉴인데 말이다.

tailwindcss 4의 오류인지, 아니면 일부러 이렇게 설계를 한 것인지는 잘 모르겠지만, 어쨌든 <button> 태그 위에 마우스를 올려놓았을 때도 커서 모양이 검지 손가락으로 요소를 가리키는 모양이 되도록 수정해 보자.

resources/css/app.css 파일 수정

// 생략

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  /* 여기에 마우스 커서 스타일을 추가한다 */
  button:not(:disabled), 
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

주석으로 표시한 코드를 추가하자.

이 코드는 마우스 커서를 손가락 모양(pointer)으로 바꾸되, 정말로 클릭이 가능한 정상 상태의 버튼에만 적용하도록 하는 코드다.

오늘의 포스트는 정말 짧다.

여기까지다.