2f:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Casos de Uso: Quando Usar Cada Abordagem"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"A escolha entre Tailwind CSS e CSS-in-JS deve ser baseada nos requisitos específicos do\n projeto, equipe e objetivos de performance."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-green-500/10 border-green-500/20 text-green-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-green-400","children":[["$","span",null,{"children":"✅"}],"Tailwind CSS: Ideal Para"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Marketing sites: Performance crítica para SEO e conversão"}],["$","p","1",{"className":"text-gray-300 leading-relaxed mb-6","children":"E-commerce: Carregamento rápido impacta vendas diretamente"}],["$","p","2",{"className":"text-gray-300 leading-relaxed mb-6","children":"Dashboards: Design system consistente e desenvolvimento rápido"}],["$","p","3",{"className":"text-gray-300 leading-relaxed mb-6","children":"Mobile-first: Bundle size otimizado para dispositivos móveis"}]]}]]}],["$","div","2",{"className":"border rounded-xl p-6 mb-8 bg-yellow-500/10 border-yellow-500/20 text-yellow-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-yellow-400","children":[["$","span",null,{"children":"⚠️"}],"CSS-in-JS: Ideal Para"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Apps complexas: Styling dinâmico baseado em estado complexo"}],["$","p","1",{"className":"text-gray-300 leading-relaxed mb-6","children":"Component libraries: Encapsulamento e distribuição de componentes"}],["$","p","2",{"className":"text-gray-300 leading-relaxed mb-6","children":"Theming avançado: Mudanças de tema em runtime"}],["$","p","3",{"className":"text-gray-300 leading-relaxed mb-6","children":"Equipes React-heavy: Quando o paradigma component-first é prioritário"}]]}]]}]]]}]