Largura do anel de vento de cauda
Neste artigo, examinaremos a propriedade de largura do anel Tailwind e como usá-la para criar designs únicos e visualmente atraentes.
O utilitário de largura do anel é usado para definir a largura do anel em torno de um elemento.
A largura do anel determina a espessura da borda. Por padrão, o Tailwind gera classes para larguras de anel variando de 0 a 4, com cada valor correspondendo a um tamanho de pixel específico.
Usando o Tailwind ring-width , podemos criar designs e estilos exclusivos para os elementos interativos do nosso site.
Classes de largura do anel de vento de cauda
| Aulas | Visão geral |
| anel-0 | Esta classe é usada para remover o anel em torno de um elemento. |
| anel-1 | Esta classe é usada para definir a largura do anel para 1px. |
| anel-2 | Nesse caso, a largura do anel é definida como 2px. |
| anel | A largura do anel é definida aproximadamente como 3px usando esta classe. |
| anel-4 | Usando esta classe, a largura do anel é definida como 4px. |
| anel-8 | Esta classe especifica a largura do anel como 8px. |
| anel de inserção | Nesse caso, o anel aparece dentro do elemento e não fora. A largura do anel ainda é definida usando as classes acima. |
Sintaxe
<element class="ring-4">...</element >
Para usar Tailwind Ring Width, basta adicionar a classe apropriada ao seu elemento HTML .
O exemplo a seguir mostra a implementação de algumas classes de largura de anel no Tailwind:
Example:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold my-4"
MrExamples
class="font-medium my-4"Ring Width class in Tailwind
class="mx-16 grid grid-cols-3 gap-6 p-2 font-medium"
class="ring-0 ring-black bg-blue-300
w-full h-10 rounded"
ring-0
class="ring-1 ring-black bg-red-400
w-full h-10 rounded"
ring-1
class="ring-2 ring-black bg-yellow-300
w-full h-10 rounded"
ring-2
class="ring ring-black bg-fuchsia-300
w-full h-10 rounded"
ring
O exemplo abaixo retrata a implementação das demais classes de largura do anel não cobertas no exemplo anterior:
Example:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold my-4"
MrExamples
class="font-medium my-4"Ring Width class in Tailwind
class="mx-16 grid grid-cols-2 gap-6 p-2 font-medium"
class="ring-4 ring-black bg-blue-300
w-full h-10 rounded"
ring-4
class="ring-8 ring-black bg-red-400
w-full h-10 rounded"
ring-8
class="ring-inset ring-4 ring-black bg-yellow-300
w-full h-10 rounded"
ring-inset ring-4
class="ring-inset ring-8 ring-black bg-green-300
w-full h-10 rounded"
ring-inset ring-8
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
