Repository: tailwindlabs/tailwindcss (TypeScript)
Date: 2017-11-09 14:59:30+00:00
Task type: Feature

Issue:
More cursor helpers
<!--

👋 Hey, thanks for taking an interest in Tailwind!

Please only open an issue here if you have a bug to report or a feature proposal you'd like to discuss.

If you need help, have questions about best practices, or want to start a discussion about anything else related to Tailwind, open an issue on the `tailwindcss/discuss` repo instead:

https://github.com/tailwindcss/discuss/issues

-->
There is a lot of cursor values to the `cursor` property, but just three in tailwindcss for now.

There is a reason to not put on the rest?

I can make a pull request if this issue is accepted.


Issue discussion:
I think this is mostly because the ones you most commonly use are `pointer` and `not-allowed`, plus we have `auto` to set it back to the browser default.

Adding all the options would simply add bloat to the framework, and not really add much extra value. Plus, it's trivial to [add new utilities](https://tailwindcss.com/docs/adding-new-utilities).

Are there [any others](https://www.w3schools.com/cssref/pr_class_cursor.asp) you feel should be included by default?
Well, for me it's pretty common using the `default`.

For example, to make panel headers feels more like a window inside the page.

Sometimes you want to make sure that user understand that he can't copy the text.

For me, at least, makes sense.
Yep, fair enough, I could see adding that one.

@adamwathan What do you think?
> Sometimes you want to make sure that user understand that he can't copy the text.

@noamcore A better way to handle that scenario is to use the `select-none` utility which sets `user-select: none` and also happens to change the cursor:

https://jsfiddle.net/pvbwdLsp/4/

Going to close this for now; happy to revisit if there's a strong argument for shipping more cursors by default.
Turns out Safari doesn't change the cursor which is lame. We'll add `default` 👍 
@adamwathan When I try the JSFiddle in Chrome (61.0), I also see the `text` cursor.
<img width="207" alt="naamloos" src="https://user-images.githubusercontent.com/6643991/32611600-608dab06-c566-11e7-8257-3b00a97ddf66.png">

Solution patch:
diff --git a/src/generators/cursor.js b/src/generators/cursor.js
--- a/src/generators/cursor.js
+++ b/src/generators/cursor.js
@@ -3,6 +3,7 @@ import defineClasses from '../util/defineClasses'
 export default function() {
   return defineClasses({
     'cursor-auto': { cursor: 'auto' },
+    'cursor-default': { cursor: 'default' },
     'cursor-pointer': { cursor: 'pointer' },
     'cursor-not-allowed': { cursor: 'not-allowed' },
   })


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3533,6 +3533,10 @@ button,
   cursor: auto;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -6493,6 +6497,10 @@ button,
     cursor: auto;
   }
 
+  .sm\:cursor-default {
+    cursor: default;
+  }
+
   .sm\:cursor-pointer {
     cursor: pointer;
   }
@@ -9454,6 +9462,10 @@ button,
     cursor: auto;
   }
 
+  .md\:cursor-default {
+    cursor: default;
+  }
+
   .md\:cursor-pointer {
     cursor: pointer;
   }
@@ -12415,6 +12427,10 @@ button,
     cursor: auto;
   }
 
+  .lg\:cursor-default {
+    cursor: default;
+  }
+
   .lg\:cursor-pointer {
     cursor: pointer;
   }
@@ -15376,6 +15392,10 @@ button,
     cursor: auto;
   }
 
+  .xl\:cursor-default {
+    cursor: default;
+  }
+
   .xl\:cursor-pointer {
     cursor: pointer;
   }