Guia abrangente para largura do vento de cauda
Neste artigo, exploraremos os diferentes aspectos da propriedade de largura do Tailwind , incluindo sua sintaxe, valores padrão e casos de uso comuns.
Com o utilitário Tailwind CSS width, os desenvolvedores podem criar sites visualmente impressionantes e responsivos com eficiência. O utilitário de largura do Tailwind fornece aos desenvolvedores uma variedade de classes predefinidas para definir a largura de um elemento.
Índice-
Classes de largura do vento de cauda
Abaixo está uma explicação das classes utilitárias de largura do Tailwind:
| Aulas | Visão geral | |
| w-0 | A largura é definida como zero. | |
| w-px | Equivalente à largura CSS personalizada | 1 px. |
| w-0,5 | Esta classe define a largura de um elemento como 0,125rem ou 2px. | |
| w-1 | Uma largura de 0,25 rem ou 4px é definida usando esta classe. | |
| w-1.5 | Usando esta classe, a largura de um elemento é definida como 0,375rem ou 6px. | |
| w-2 | A largura de um elemento nesta classe é 0,5 rem ou 8 pixels. | |
| w-2.5 | Os elementos que usam esta classe têm uma largura de 0,625rem (10px). | |
| w-3 | A largura de um elemento é especificada como 0,75 rem ou 12px. | |
| w-3.5 | Essa classe define a largura de um elemento como 0,875 rem ou 14 px. | |
| w-4 | Usando esta classe, você pode definir a largura de um elemento para 1rem ou 16px. | |
| w-5 | Usando esta classe, um elemento terá uma largura de 1,25 rem ou 20 pixels. | |
| w-6 | Neste caso, o elemento terá largura de 1,5rem ou 24px. | |
| w-7 | Esta classe define a largura de um elemento para 1,75 rem ou 28px. | |
| w-8 | A largura de um elemento é definida como 2rem ou 32px com esta classe. | |
| w-9 | Uma largura de 2,25 rem ou 36px é aplicada a um elemento usando esta classe. | |
| w-10 | Esta classe define a largura de um elemento para 2,5rem (40px). | |
| w-11 | Quando esta classe é usada, a largura de um elemento é definida como 44px ou 2,75rem. | |
| w-12 | Uma classe com este nome define a largura de um elemento para 3rem ou 48px. | |
| w-14 | Ele define a largura de um elemento para 3,5 rem ou 56px. | |
| w-16 | A largura de um elemento é definida como 4rem ou 64px usando esta classe. | |
| w-20 | Usando esta classe, a largura de um elemento é definida como 5rem ou 80px. | |
| w-24 | Esta classe define a largura de um elemento como 6rem ou 96px. | |
| w-28 | Um elemento usando esta classe tem uma largura de 7rem ou 112px. | |
| w-32 | A largura de um elemento é 8rem, ou 128px, quando esta classe é aplicada. | |
| w-36 | Esta classe aplica uma largura de 9rem ou 144px a um elemento. | |
| w-40 | Usando esta classe, um elemento terá uma largura de 10rem ou 160px. | |
| w-44 | Esta classe especifica a largura de um elemento como 11rem ou 176px. | |
| w-48 | Uma largura de 12rem ou 192px é especificada por esta classe. | |
| w-52 | Um elemento com esta classe tem uma largura de 13rem ou 208px. | |
| w-56 | Os elementos nesta classe são definidos para ter uma largura de 14rem ou 224px. | |
| w-60 | Usando esta classe, um elemento tem uma largura de 15rem ou 240px. | |
| w-64 | Os elementos que usam esta classe têm uma largura de 16rem ou 256px. | |
| w-72 | Usando esta classe, os elementos são especificados como 18rem ou 288px de largura. | |
| w-80 | A largura de um elemento é especificada como 20rem ou 320px. | |
| w-96 | Uma largura de 24rem ou 384px é definida por esta classe. | |
| w-auto | Essa classe define a largura de um elemento para seu tamanho automático padrão com base em seu conteúdo. | |
| w-1/2 | Essa classe define a largura de um elemento para 50% da largura de seu contêiner pai. | |
| w-1/3 | Nesta classe, a largura de um elemento é definida como 33,33% da largura de seu contêiner pai. | |
| w-2/3 | Um elemento com esta classe tem uma largura de 66,67% de seu contêiner pai. | |
| w-1/4 | Os elementos desta classe têm uma largura de 25% de seus contêineres pais. | |
| w-2/4 | Essa classe define a largura de um elemento para 50% da largura de seu contêiner pai. | |
| w-3/4 | A largura de um elemento nesta classe é definida como 75% da largura de seu contêiner pai. | |
| w-1/5 | Um elemento dessa classe tem uma largura que é 20% da largura de seu contêiner pai. | |
| w-2/5 | A largura do elemento é definida como 40% da largura do contêiner pai. | |
| w-3/5 | A largura do elemento será definida como 60% da largura do contêiner pai. | |
| w-4/5 | Usando esta classe, os elementos são definidos para 80% da largura do contêiner pai. | |
| w-1/6 | Essa classe define a largura de um elemento para 16,67% da largura de seu contêiner pai. | |
| w-2/6 | Nesta classe, a largura de um elemento é definida como 33,33% da largura de seu contêiner pai. | |
| w-3/6 | Essa classe define a largura de um elemento para 50% da largura de seu contêiner pai. | |
| w-4/6 | A largura de um elemento é definida como 66,67% da largura de seu contêiner pai de acordo com esta classe. | |
| w-5/6 | Essa classe define a largura de um elemento para 83,33% da largura de seu contêiner pai. | |
| w-cheio | Essa classe define a largura de um elemento como 100% da largura de seu contêiner pai. | |
| w-screen | Esta classe especifica a largura de um elemento para ser igual à largura da tela. | |
| w-min | Isso definirá a largura de um elemento para a largura mínima necessária para conter seu conteúdo. | |
| w-max | Isso definirá a largura do elemento para a largura máxima necessária para conter seu conteúdo. | |
| w-fit | A largura de um elemento será ajustada com base na largura do conteúdo do elemento. |
Unidades absolutas de largura do vento de cauda
Unidades absolutas são unidades de medida em CSS que não são baseadas no tamanho relativo de outros elementos.
Eles têm valores fixos e permanecem constantes independentemente do tamanho ou das dimensões da viewport ou de outros elementos da página.
As unidades absolutas mais comuns são pixels (px), pontos (pt), polegadas (in), centímetros (cm) e milímetros (mm).
Sintaxe
A classe de largura do Tailwind segue uma convenção de nomenclatura simples que consiste em duas partes: w- e o valor da largura.
O valor da largura pode ser especificado em pixels ( px ), porcentagens ( % ) ou usando uma das classes de largura predefinidas.
<element class="w-10">...</element>
Este exemplo mostra a implementação de cálculos de largura do Tailwind usando unidades absolutas:
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
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold text-gray-700 my-3"Width Class in Tailwind CSS
class="w-20 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-20
class="w-28 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-28
class="w-36 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-36
class="w-44 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-44
class="w-52 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-52
class="w-60 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-60
class="w-72 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-72
class="w-80 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-80
class="w-96 bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-96
Unidades relativas de largura do vento de cauda
Unidades relativas são unidades CSS relativas a outra propriedade ou valor, geralmente o tamanho da fonte do elemento ou a largura de seu contêiner pai. Eles são particularmente úteis para criar designs flexíveis e responsivos que se adaptam a diferentes tamanhos de tela e dispositivos.
Sintaxe
<element class="w-2/3">...</element>
Este exemplo se concentra na implementação da largura do Tailwind usando unidades relativas:
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
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
57
58
59
60
61
62
63
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold text-gray-700 my-3"Width Class in Tailwind CSS
class="flex my-3 font-medium"
class="w-1/2 bg-amber-200 h-12 rounded-l-lg"
w-1/2
class="w-1/2 bg-amber-300 h-12 rounded-r-lg"
w-1/2
class="flex my-3 font-medium"
class="w-2/5 bg-amber-200 h-12 rounded-l-lg"
w-2/5
class="w-3/5 bg-amber-300 h-12 rounded-r-lg"
w-3/5
class="flex my-3 font-medium"
class="w-1/3 bg-amber-200 h-12 rounded-l-lg"
w-1/3
class="w-2/3 bg-amber-300 h-12 rounded-r-lg"
w-2/3
class="flex my-3 font-medium"
class="w-1/4 bg-amber-200 h-12 rounded-l-lg"
w-1/4
class="w-3/4 bg-amber-300 h-12 rounded-r-lg"
w-3/4
class="flex my-3 font-medium"
class="w-1/5 bg-amber-200 h-12 rounded-l-lg"
w-1/5
class="w-4/5 bg-amber-300 h-12 rounded-r-lg"
w-4/5
class="flex my-3 font-medium"
class="w-1/6 bg-amber-200 h-12 rounded-l-lg"
w-1/6
class="w-5/6 bg-amber-300 h-12 rounded-r-lg"
w-5/6
class="w-full bg-amber-300 h-12 rounded-lg my-3 font-medium"
w-full
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
