Tentei utilizar o breakpoint lg como indicado na aula e sempre o flex direction estava sendo sobrescrito, como se ele não funcionasse, só consegui esse efeito quando utilizei lg:flex-row. Não entendo o motivo, pois não achei nada na documentação que indicasse porque o lg sozinho parou de funcionar.
Olá Mauricio! Tudo bem?
Entendo sua dúvida e é ótimo que você esteja explorando os breakpoints do Tailwind CSS. O que você descreveu é, na verdade, o comportamento esperado. No Tailwind, os breakpoints como lg, md, sm, etc., são usados como prefixos para modificar classes utilitárias específicas a partir de um determinado tamanho de tela.
Quando você usa lg:flex-row, está dizendo ao Tailwind para aplicar flex-row a partir do breakpoint lg (ou seja, para telas com largura mínima de 1024px). O prefixo lg por si só não tem um efeito direto, ele precisa ser combinado com uma classe utilitária, como flex-row, para funcionar.
Se você apenas usar lg, sem uma classe utilitária específica, ele não terá efeito. É por isso que o lg:flex-row funcionou para você. Isso está em linha com o princípio "Mobile First" do Tailwind, onde você define estilos básicos para telas menores e usa breakpoints para modificar esses estilos em telas maiores.
Espero ter ajudado. Conte com o apoio do fórum :)
Abraços e bons estudos!