1
resposta

Gostaria de ajudar, explicando sobre margin e padding dizendo que só precisamos olhar na tabela para saber o valor da margem(m) e do preenchimento(p) se forem inferiores a 4. Leia meu comentário aqui para entender o porquê

Gostaria de contribuir, explicando sobre margin e padding que só precisamos consultar a tabela para descobrir os valores de margem e preenchimento se estiverem abaixo de 4rem e se forem quebrados. Todos os valores do Tailwind referentes a margin ou padding são o próprio valor de rem multiplicado por 4!!! Para exemplificar, aqui estão alguns valores da documentação:

m-0.5 = 0.125rem (0.125 x 4 = 0.5)
m-1 = 0.25rem (0.25 x 4 = 1)
m-1.5 = 0.375rem (0.375 x 4 = 1.5)
m-2 = 0.5rem (0.5 x 4 = 2)
m-2.5 = 0.625rem (0.625 x 4 = 2.5)
m-3 = 0.75rem (0.75 x 4 = 3)

Mas até chegar no número 4rem é imprevisível as opções decimais disponíveis se não memorizarmos porque eles ficam cada vez menos disponíveis. Como o decimal .125 que não está mais disponível a partir da unidade 1rem. Sendo seguro fazer esses cálculos ou a partir de quatro ou com valores inteiros.

A documentação disponibiliza números fracionados apenas para valores menores que 4, e cada casa (0, 1, 2, 3) suporta diferentes tamanhos de decimais cada vez menos específicos. Assim, admito que pode envolver memorização ou consulta. No entanto, a partir do número 4REM ou qualquer número inteiro até 24, basta pegar o número de REM desejado e multiplicar por quatro.

Assim:

4rem é m-16 porque 4x4 é 16
5rem é m-25 porque 5x4 é 20
6rem é m-24 porque 6x4 é 24
7rem é m-28 porque 7x4 é 28 

E vai contado de 4 em quatro.

Vá à documentação e faça seus cálculos para ver com seus próprios olhos essa abordagem prática clicando aqui: https://tailwindcss.com/docs/padding.

1 resposta

Olá Marcos, Tudo ok contigo?

Muito obrigado por compartilhar seu conhecimento no fórum! É incrível ver alunos como você contribuindo para o aprendizado coletivo.

Seu conhecimento sobre margin e padding é valioso e oferece uma abordagem prática para entender os valores associados no Tailwind. A tabela e os exemplos que você forneceu são bastante esclarecedores. No entanto, gostaríamos de esclarecer um ponto para evitar possíveis confusões:

No trecho onde você mencionou:

Todos os valores do Tailwind referentes a margin ou padding são o próprio valor de rem multiplicado por 4!!!

Queremos ressaltar que essa multiplicação por 4 é específica para valores abaixo de 4rem. A partir de 4rem e para números inteiros até 24, a relação é linear, como você exemplificou corretamente:

4rem é m-16 porque 4x4 é 16
5rem é m-20 porque 5x4 é 20
6rem é m-24 porque 6x4 é 24
7rem é m-28 porque 7x4 é 28 

Agradecemos novamente pela sua contribuição valiosa! Se houver mais insights ou correções para adicionar, sinta-se à vontade para compartilhar. O link para a documentação também é útil para que os membros possam explorar mais detalhes.

Continue assim, e obrigado por fazer parte da comunidade!

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software