1. Ajuste de Layout Responsivo com Grid e Calc
Desenvolvedor FrontendContexto
Um desenvolvedor precisa criar um layout de grid de três colunas com larguras específicas e uma altura de cabeçalho dinâmica baseada em calc().
Problema
Garantir que a sintaxe do Tailwind para grid-cols-[1fr_2fr_1fr] e h-[calc(100vh-4rem)] seja traduzida corretamente para CSS sem erros de digitação.
Como usar
Insira as classes grid-cols-[1fr_2fr_1fr] e h-[calc(100vh-4rem)] no campo de entrada de classes.
classes: "grid-cols-[1fr_2fr_1fr]\nh-[calc(100vh-4rem)]", outputFormat: "expanded"Resultado
O parser exibe as regras CSS correspondentes com os sublinhados convertidos em espaços e a função calc() formatada corretamente.