Cursor Tailwind: um guia completo

Vamos nos aprofundar na classe de cursor Tailwind neste artigo que abrange extensivamente todos os conceitos relacionados.

No Tailwind CSS , a classe Cursor é usada para especificar o cursor do mouse a ser exibido enquanto aponta para um elemento.

Cursor de vento de cauda

No CSS tradicional, conseguimos isso usando a propriedade CSS cursor.

No Tailwind CSS, essa classe aceita vários valores e todas as propriedades são cobertas no formulário de classe.

Sintaxe

<element class="cursor-{behaviour}">....</element>

Índice-

Tailwind Cursor Um Guia Abrangente:
- Classes de cursor Tailwind:

Classes de Cursor Tailwind

Como parte das folhas de estilo Tailwind CSS, você pode estilizar cursores usando várias classes diferentes, conforme mostrado abaixo na tabela a seguir.

Aulas	Visão geral
cursor automático	Esta é a classe padrão. Usando essa classe, o navegador define um cursor automaticamente.
padrão do cursor	Esta classe define o cursor presente na operação normal. Normalmente uma flecha.
ponteiro do cursor	Essencialmente, um cursor é um ponteiro que indica um link nesta classe.
cursor-espera	O cursor indica que o programa está ocupado nesta classe.
texto do cursor	No caso desta classe, podemos ver um cursor indicando o texto que pode ser selecionado quando for utilizado.
cursor-move	O cursor nesta classe indica algo que precisa ser movido quando é clicado.
cursor-ajuda	O cursor indica que há ajuda disponível sobre o conteúdo sobre o qual você está passando o mouse.
cursor não permitido	É evidente pelo cursor desta classe que a ação solicitada não ocorrerá.
cursor-nenhum	O cursor está oculto usando esta classe.
menu de contexto do cursor	Ele especifica que um menu de contexto está disponível.
progresso do cursor	O programa está ocupado em execução, mas ainda é interativo.
célula do cursor	Selecione uma célula da tabela ou um conjunto de células.
cursor retículo	O cursor cruzado é mostrado, o que geralmente é usado para indicar a seleção em bitmaps.
cursor-vertical-text	O cursor indica que há uma opção para selecionar o texto vertical.
cursor-alias	O objetivo desta aula é destacar que um atalho deve ser criado.
cópia do cursor	O cursor indica que algo deve ser copiado.
cursor sem soltar	O cursor resultante indica que o item não pode ser solto no local atual.
cursor-agarrar	O cursor indica que algo pode ser agarrado e arrastado para mover para outro lugar.
agarrar o cursor	Algo está atualmente agarrado pelo cursor e deve ser movido para um novo local.
cursor-toda-rolagem	Há uma indicação pelo cursor de que algo pode ser rolado em qualquer direção.
cursor-col-resize	A coluna pode ser redimensionada de acordo com nossas necessidades. Arrastando horizontalmente.
redimensionamento da linha do cursor	A linha pode ser redimensionada arrastando para cima ou para baixo.
cursor-n-redimensionar	Este cursor é usado para ajustar o tamanho de um elemento na direção ascendente.
cursor-e-resize	Este cursor é usado para ajustar o tamanho de um elemento na direção da mão direita.
cursor-s-redimensionar	Este cursor é usado para ajustar o tamanho de um elemento na direção descendente.
cursor-w-resize	Este cursor é usado para ajustar o tamanho de um elemento na direção esquerda.
cursor-ne-redimensionar	Cursor para redimensionar o elemento na direção nordeste.
cursor-nw-resize	Cursor para redimensionar o elemento na direção noroeste.
cursor-se-redimensionar	Cursor para redimensionar o elemento na direção sudeste.
cursor-sw-resize	Cursor para redimensionar o elemento na direção sudoeste.
cursor-ew-resize	Este cursor permite redimensionar um elemento horizontalmente em ambas as direções.
cursor-ns-resize	Este cursor permite redimensionar um elemento verticalmente em ambas as direções.
cursor-nesw-resize	Cursor para redimensionar um elemento na direção superior direita ou inferior esquerda.
cursor-nwse-resize	Cursor para redimensionar um elemento na direção superior esquerda ou inferior direita.
cursor-zoom-in	O cursor resultante indica que um elemento sendo focalizado pode ser ampliado com um clique.
cursor-zoom-out	O cursor resultante indica que um elemento sendo focalizado pode ser ampliado ao clicar.

Este exemplo mostra a aplicação de algumas das classes de cursor no Tailwind:

Tailwind Cursor Example: 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2">Tailwind CSS Cursor Class</p>
 <div id="main" class="p-2 justify-around mx-auto w-3/4 flex
   items-center border-solid gap-4 flex-wrap my-2 font-medium">
 <div class="cursor-auto bg-gray-300
  p-2 rounded-md">
   Hover over cursor-auto
 </div>
 <div class="cursor-default bg-gray-300
  p-2 rounded-md">
   Hover over cursor-default
 </div>
 <div class="cursor-pointer bg-gray-300
  p-2 rounded-md">
   Hover over cursor-pointer
 </div>
 <div class="cursor-wait bg-gray-300
  p-2 rounded-md">
   Hover over cursor-wait
 </div>
 <div class="cursor-text bg-gray-300
  p-2 rounded-md">
   Hover over cursor-text
 </div>
 <div class="cursor-move bg-gray-300
  p-2 rounded-md">
   Hover over cursor-move
 </div>
 <div class="cursor-help bg-gray-300
  p-2 rounded-md">
   Hover over cursor-help
 </div>
 <div class="cursor-not-allowed bg-gray-300
  p-2 rounded-md">
   Hover over cursor-not-allowed
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo relacionado à classe cursor no Tailwind é ilustrado abaixo:

Tailwind Cursor Example: 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2">Tailwind CSS Cursor Class</p>
 <div id="main" class="p-2 justify-around mx-auto w-3/4 flex
   items-center border-solid gap-4 flex-wrap my-2 font-medium">
 <div class="cursor-none bg-gray-300
  p-2 rounded-md">
   Hover over cursor-none
 </div>
 <div class="cursor-context-menu bg-gray-300
  p-2 rounded-md">
   Hover over cursor-context-menu
 </div>
 <div class="cursor-progress bg-gray-300
  p-2 rounded-md">
   Hover over cursor-progress
 </div>
 <div class="cursor-cell bg-gray-300
  p-2 rounded-md">
   Hover over cursor-cell
 </div>
 <div class="cursor-crosshair bg-gray-300
  p-2 rounded-md">
   Hover over cursor-crosshair
 </div>
 <div class="cursor-vertical-text bg-gray-300
  p-2 rounded-md">
   Hover over cursor-vertical-text
 </div>
 <div class="cursor-alias bg-gray-300
  p-2 rounded-md">
   Hover over cursor-alias
 </div>
 <div class="cursor-copy bg-gray-300
  p-2 rounded-md">
   Hover over cursor-copy
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outras classes de cursor no Tailwind são examinadas abaixo:

Tailwind Cursor Example: 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2">Tailwind CSS Cursor Class</p>
 <div id="main" class="p-2 justify-around mx-auto w-4/5 flex
   items-center border-solid gap-4 flex-wrap my-2 font-medium">
 <div class="cursor-no-drop bg-gray-300
  p-2 rounded-md">
   Hover over cursor-no-drop
 </div>
 <div class="cursor-grab bg-gray-300
  p-2 rounded-md">
   Hover over cursor-grab
 </div>
 <div class="cursor-grabbing bg-gray-300
  p-2 rounded-md">
   Hover over cursor-grabbing
 </div>
 <div class="cursor-all-scroll bg-gray-300
  p-2 rounded-md">
   Hover over cursor-all-scroll
 </div>
 <div class="cursor-col-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-col-resize
 </div>
 <div class="cursor-row-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-row-resize
 </div>
 <div class="cursor-n-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-n-resize
 </div>
 <div class="cursor-e-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-e-resize
 </div>
 <div class="cursor-s-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-s-resize
 </div>
 <div class="cursor-w-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-w-resize
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Este exemplo explica o uso das classes de cursor restantes no Tailwind:

Tailwind Cursor Example: 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
 <h1 class="text-gray-600 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2">Tailwind CSS Cursor Class</p>
 <div id="main" class="p-2 justify-around mx-auto w-4/5 flex
   items-center border-solid gap-4 flex-wrap my-2 font-medium">
 <div class="cursor-ne-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-ne-resize
 </div>
 <div class="cursor-nw-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-nw-resize
 </div>
 <div class="cursor-se-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-se-resize
 </div>
 <div class="cursor-sw-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-sw-resize
 </div>
 <div class="cursor-ew-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-ew-resize
 </div>
 <div class="cursor-ns-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-ns-resize
 </div>
 <div class="cursor-nesw-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-nesw-resize
 </div>
 <div class="cursor-nwse-resize bg-gray-300
  p-2 rounded-md">
   Hover over cursor-nwse-resize
 </div>
 <div class="cursor-zoom-in bg-gray-300
  p-2 rounded-md">
   Hover over cursor-zoom-in
 </div>
 <div class="cursor-zoom-out bg-gray-300
  p-2 rounded-md">
   Hover over cursor-zoom-out
 </div>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nós valorizamos o seu feedback.