Guia rápido para a largura do curso do vento de cauda

Este artigo fornecerá uma análise aprofundada das classes de largura de traçado do Tailwind com exemplos .

Normalmente, a largura do traçado é usada em combinação com imagens SVG (Scalable Vector Graphics).

Largura do curso do vento de cauda

A largura do traço é usada para definir a espessura das linhas em imagens SVG e pode ser ajustada por meio de propriedades CSS, como largura do traço.

Usando o Tailwind, a largura do traçado é uma classe de utilitário que especifica a largura de um traçado SVG .



Classes de largura de curso do vento de cauda

O Tailwind fornece um conjunto de classes para a largura do traçado que varia de 0 a 2.

As classes são nomeadas usando o prefixo do traço, seguido por um número que representa a espessura de um elemento.

Para implementar a largura do traçado no Tailwind, usamos as seguintes classes:

Aulas Visão geral
golpe-0 Usado para definir a largura do traço de um SVG para 0.
golpe-1 Esta classe é usada para definir a largura do traço de um elemento como 1px.
curso-2 Nesse caso, a largura do traço de um elemento é especificada como 2px.
Observação : essas classes podem ser usadas em conjunto com outras classes Tailwind para criar estilos personalizados para seus elementos.

Sintaxe

<svg class="stroke-{width}">...</svg>

Usar a largura do traçado Tailwind é fácil. Você pode adicionar uma classe de largura de traçado a um elemento.

O exemplo a seguir mostra a implementação da classe de largura do traçado no Tailwind :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-medium">Stroke Width Class in Tailwind</p>
<div class="bg-gray-500 grid grid-flow-col w-fit p-4 mx-auto mt-4 rounded">
<svg height="100px" width="350px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1">
<rect class="stroke-current text-yellow-400 stroke-0" x="10" y="10" width="80" height="80"></rect>
<rect class="stroke-current text-yellow-400 stroke-1" x="120" y="10" width="80" height="80"></rect>
<rect class="stroke-current text-yellow-400 stroke-2" x="240" y="10" width="80" height="80"></rect>
</svg>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Se você achou este artigo informativo, compartilhe seus comentários deixando uma reação abaixo.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone