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.