how to add setting in tailwind.config.js if screen size is less than 780px then disable all cursor-pointers?

note I'm using nextjs and tailwind

CodePudding user response：

The answer from @ahmed is almost correct. In the docs there is no cursor-disabled

If you look at the docs here you can see that Tailwind offer a cursor-none property.

The best way to set this is like Ahmed said, in your global.css file you an do something like

* {
   @apply cursor-none md:cursor-auto
}

Here you're using md: which is the breakpoint for 768px min-width

But the question would be why would you want to disable the cursor on small screens? If it's mobile there wont be any cursor anyways?

CodePudding user response：

I think there's couple of options here

1. Create a custom class or select all elements and set cursor disabled in global.css file

* {
 @apply !cursor-not-allowed md:!cursor-auto
}

2. For each instance just use cursor-not-allowed md:cursor-auto
3. On the main wrapper in the layout file you can try cursor-not-allowed md:cursor-auto