Add default cursor option

[barnabaskecskes]

It is somewhat cumbersome to undo cursor-pointer class and cannot be done with tailwind itself at the time of this PR. For example imagine a navigation where all li tags need to show as links but the currently active one. Consider below.

li {
    @apply .cursor-pointer;

    &.active {
        cursor: default; // no tailwind option
    }
}

Yes, one could do it with more complex selectors (see below), but it's much simpler to have the extra option available when needed (see even below - after the change).

li {
    &:not(.active) {
        @apply .cursor-pointer;
    }
}

After-PR option:

li {
    @apply .cursor-pointer;

    &.active {
        @apply .cursor-default;
    }
}

[adamwathan]

Hey thanks for the PR! We have .cursor-auto which is intended to be used to reset any cursor overrides back to the browsers default for that element; does that not give the results you’re expecting? Open to merging this for sure if we need it.

[barnabaskecskes]

Hey Adam, very interesting indeed... I have checked in Firefox (an older version, maybe before 2-3 updates prior to latest and latest) and in both of those it works as you expect. I tested Chrome 61 and 62 (latest) and it does not work the same - I have to specify cursor: default; explicitly to get the expected behaviour. I'm not sure whether it is a bug in Chrome or intended behaviour, but currently it works rather an inherit type than a browser default one. (For avoidance of doubt, I have done the tests with normal CSS properties as well - same results.)

[adamwathan]

Hmm I can't seem to replicate that in latest Chrome. Here's a fiddle, can you fork it and show me what you're trying to do that doesn't give the expected results?

https://jsfiddle.net/egkkde0c/1/

[barnabaskecskes]

Hmmm I think I know why. It only appears to be a problem if you try to use those classes on <a> tags (which probably has the browser default as cursor: pointer; so that would make sense).

See the demo at https://jsfiddle.net/28mj9595/1/.

Apparently, this behaviour got nothing to do with TailwindCSS, but for the above case, cursor-default might prove to be useful.

[adamwathan]

Do you want the active link to be clickable still? If so I feel like it should have a default link cursor, and if not, I would say make it a span not an a tag if it's active so it's not actually a link.

I think we're going to hold off on adding this to the default utility set at least for now, but open to revisiting it in the future or possibly making the cursor utilities customizable.

In the mean time, it's still super easy to add your own responsive cursor-default class by adding this to your own CSS file:

@responsive {
  .cursor-default { cursor: default; }
}

Thanks for the PR still, super appreciate it and hope you'll continue to contribute in the future 👍

[barnabaskecskes]

Well, making it a span instead probably makes the most sense whichever way I'm looking at it. Thanks for your time looking into this (especially as swiftly as you just did). Go, Tailwind! :)