Tailwind CSS not applying cursor-pointer automatically to <a> and <button> in React + Vite

Question

I'm using Tailwind CSS with React and Vite. I noticed that I have to manually add cursor-pointer to <a> and <button> elements for the pointer cursor to appear.

I thought Tailwind would handle this automatically for interactive elements. Am I missing something in my setup, or is this the expected behavior?

<button className="bg-blue-500 text-white p-2">
  Buy Now
</button>
<a href="#" className="text-blue-500">
  View Morew
</a>

In this case, the cursor does not change to a pointer unless I add cursor-pointer.

May interest for you: From v4 the reset style cannot be overridden by TailwindCSS classes and How to install React + Vite & TailwindCSS v4 (second block) — rozsazoltan
– rozsazoltan, Commented Sep 27 at 9:14
Using official docs: tailwindcss.com/docs/installation/using-vite @rozsazoltan — Pawan Saini
– Pawan Saini, Commented Sep 27 at 9:26

rozsazoltan · Accepted Answer · 2025-09-27 13:49:41Z

The <button> HTML element doesn't have a pointer cursor by default:

<button>Hello World</button>

TailwindCSS did indeed handle the cursor automatically in earlier versions (until v3), but this behavior was intended to be removed starting with v4.0.0 what will fixed issue #8961.

<!-- TailwindCSS v3.x.x -->
<script src="https://cdn.tailwindcss.com"></script>

<button class="bg-blue-500 text-white p-2">
  Buy Now
</button>
<button class="bg-blue-200 text-white p-2" disabled>
  Buy Now
</button>

From v4.0.0-alpha.22 onward this is the default behavior by PR #8962 (note: the PR's tag incorrectly shows v3.1.7) and PR #14061.

<!-- TailwindCSS v4.x.x -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<button class="bg-blue-500 text-white p-2">
  Buy Now
</button>
<button class="bg-blue-200 text-white p-2" disabled>
  Buy Now
</button>

But you can still extend it with your own CSS. It's best to add this extra styles inside @layer base - here's why:

From v4 the reset style cannot be overridden by TailwindCSS classes

<!-- TailwindCSS v4.x.x -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
/* Your main CSS file */
@import "tailwindcss";

@layer base {
  button {
    cursor: pointer;
    
    &:is([disabled]) {
      cursor: not-allowed;
    }
  }
}
</style>

<button class="bg-blue-500 text-white p-2">
  Buy Now
</button>
<button class="bg-blue-200 text-white p-2" disabled>
  Buy Now
</button>

Collectives™ on Stack Overflow

Tailwind CSS not applying cursor-pointer automatically to <a> and <button> in React + Vite

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related