Conversor de PX para REM

px (pixels) é uma unidade absoluta — 16px é sempre 16px independentemente das configurações do usuário. rem (root em) é relativo ao tamanho da fonte do elemento raiz (elemento html). O tamanho da fonte raiz padrão do navegador é 16px, então 1rem = 16px por padrão. Se um usuário mudar seu tamanho de fonte do navegador (para acessibilidade), as unidades rem escalam de acordo, mas as unidades px não. Isso torna rem preferível para tamanhos de fonte e espaçamento em designs acessíveis.

rem respeita as preferências de tamanho de fonte do usuário definidas nas configurações de acessibilidade do navegador. Usuários com deficiências visuais podem aumentar o tamanho da fonte base para 20px ou 24px — layouts baseados em rem escalam corretamente, layouts baseados em px não. rem também torna o escalonamento mais fácil: mude o font-size raiz e todos os valores rem escalam proporcionalmente. WCAG 2.1 Critério de Sucesso 1.4.4 (Redimensionar texto) recomenda unidades escaláveis. Tailwind CSS usa rem para todos os utilitários de tamanho.

Tailwind usa uma base de 1rem = 16px por padrão. A unidade base de 4px: text-xs (12px = 0,75rem), text-sm (14px = 0,875rem), text-base (16px = 1rem), text-lg (18px = 1,125rem), text-xl (20px = 1,25rem), text-2xl (24px = 1,5rem). Espaçamento: p-4 = 1rem = 16px, p-8 = 2rem = 32px. Para mudar a base: defina html { font-size: 10px } e então 1rem = 10px (tornar 1rem = 10px é um truque comum: 16px = 1,6rem).

Definir html { font-size: 62.5% } torna o tamanho da fonte raiz 62,5% de 16px = 10px. Isso significa 1rem = 10px, simplificando o cálculo mental: 16px = 1,6rem, 24px = 2,4rem, 100px = 10rem. Isso torna rem tão fácil de usar quanto px. Desvantagem: você deve lembrar de definir body { font-size: 1.6rem } (16px para texto do corpo) já que html agora é 10px. Alguns times evitam isso porque substitui as preferências de tamanho de fonte do usuário (62,5% do tamanho escolhido pelo usuário, não 16px).

em é relativo ao font-size do elemento pai (não raiz). Use em para: escalonamento em nível de componente (o preenchimento do botão escala com o tamanho da fonte do botão), media queries (consultas em baseadas em em respeitam melhor as mudanças de tamanho de fonte do usuário do que consultas em px), letter-spacing e line-height relativo ao tamanho da fonte do elemento atual. Evite em para espaçamento de layout onde componentes aninhados poderiam causar escalonamento composto inesperado. rem para escala global, em para valores relativos a componentes.