Interactive

There's a couple of interactive classes that you can use


User Select

  • select-TYP
    • TYP

      auto text none all

Docs Try it

Technically this next feature is under interactivity in the Tailwind manual, but I think it belongs here. It allows you to conrol how the user can select some text inside an element.

The default and reset is auto, which defaults to the typical browser behavior of letting you select some text. Nex is text, which technically does the same thing, but you're explicitly saying that you want the user to be able to select text regardless of previous defaults.

Then there are two interesting ones. none prevents users from selecting text in an element and all makes the entire contents of the element selectable with a single click.


Cursors

  • cursor-TYP
    • TYP

      auto default pointer wait text move not-allowed

Docs Try it

This would normally be under the interactivity section, but I'm going to cover it here. These options lets you control what cursor you have when you're over an element.

Auto lets the browser take control of what the cursor does. While default is pretty similar, it changes the cursor to use the default cursor for the platform, which normally is a cursor.

The rest of them changes the cursor to look like different things. pointer changes the mouse to a pointer, wait a watch or hourglass. text changes it to the input tool and move changes it to the move pointer and finally not-allowed shows the icon for non-interaction.