Zenn
👆

Tailwind CSS v4では、button要素にcursor: pointerがつかない

に公開
Tailwind CSS
shadcn/ui
tech

<button> 要素のカーソルが default のままになっている

React Router + shadcn/uiのプロジェクトを作成し、Buttonコンポーネントを動作確認しようとしたところ、マウスカーソルが想定通り反映されませんでした。

導入方法に間違いがあるのか？と色々調べてみると、どうやらTailwind CSS側で仕様変更があり、shadcn/uiのTailwind CSSのデフォルトバージョンがv4になったことで、この事象が発生しているようです。

個人的に結構罠みたいな挙動だと感じたので、記事としてまとめておきます。

まだv4へ移行できていないのがバレますね。

Tailwind CSS v4 での仕様変更

Tailwind CSS v4 の Upgrade guide にも、「Buttons use the default cursor」の目次があり、ちゃんと記載がありました。

https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor

挙動が変更された経緯

ブラウザのデフォルトの挙動に合わせたようです。

Hey! Yeah this was an intentional change that we've made to align better with browser defaults. You can indeed bring it back with this code: https://github.com/tailwindlabs/tailwindcss/blob/4f9f603e12b51cc53b8a09c7739b8f88c8eb87eb/src/css/preflight.css#L339-L353C1

https://github.com/tailwindlabs/tailwindcss/issues/15773#issuecomment-2612825063

本当に標準でbutton要素は cursor: default なのか

Tailwind CSS v4の開発陣を疑うわけではないですが、buttonはデフォルトで cursor: pointer だとばかり思っていました。

試しにMDNで確認してみると、確かにカーソルはdefaultのままです。最近はCSSフレームワークやUIライブラリがよしなにやってくれるので、全く意識していませんでした。

https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/button

一応もっと検証

念の為、Google Chrome, Safari, Firefoxで下記HTMLを表示してみても、マウスカーソルはdefaultのままでした。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button type="button">Click Me!</button>
  </body>
</html>

従来の挙動に戻す

とりあえず、Upgrade guideで紹介されていたスニペットを使用して、Buttonコンポーネントが従来通りの挙動になることを確認しました。

// app.css に下記を追記

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

今後の shadcn/ui の対応について

本日（2025-05-16）時点のドキュメントでは従来のように cursor: pointer がついた状態で掲載されています。

shadcnさんが「I'm working on this.」と言っているので、今後、何かしら対応があるかもしれないです。

https://github.com/shadcn-ui/ui/issues/6843#issuecomment-2822063284

Discussion