Vou executar a migração. Primeiro, deixe-me reler todos os arquivos atuais para garantir precisão.

Agora vou ler todos os componentes:

Tenho todo o contexto necessario. Vou comecar a migracão - primeiro a infraestrutura, depois cada componente.

Agora vou reescrever completamente o globals.css para usar Tachyons + classes utilitarias custom:

Infraestrutura pronta - Tailwind removido, Tachyons importado via CSS, e classes utilitarias custom criadas para grid, aspect-ratio, transicoes, cores e breakpoints que Tachyons nao cobre nativamente.

Header convertido para Tachyons com classes utilitarias (flex, items-center, ph3, pv2, br-pill, fw5, f6) e inline styles para cores hexadecimais que nao existem no Tachyons.

Quatro componentes convertidos. Hero usa tc, f3 f2-ns f1-l, fw7, lh-copy. FilterTabs usa scroll horizontal com scrollbar-hide e br-pill. LookbookCard usa aspect-3-4, hover-scale, gradient-overlay-bottom. LookbookGrid usa grid grid-cols-2 grid-cols-4-m com gaps responsivos.

Todos os 4 componentes convertidos. SocialSection usa pv4 pv5-ns, flex flex-column, br-pill. SEOContent usa mw-4xl center, lh-copy. FooterCategories usa acordeao mobile com dn/db toggle e grid-m-custom grid-cols-6-l para desktop. Footer usa f9 f8-ns para tipografia legal.

Agora preciso verificar se ha alguma dependencia residual do Tailwind que possa causar problemas. Vou remover as deps que nao sao mais necessarias do package.json:

Vou remover class-variance-authority, clsx e tailwind-merge que eram especificas do Tailwind, e mover autoprefixer de dependencies para devDependencies:

Agora vou verificar se nao existem classes Tachyons que precisam de ajuste. Vou fazer uma checagem rapida nos arquivos para classes que possam estar com conflitos:

Nao ha classes Tailwind residuais - os resultados mostram classes validas do Tachyons (flex-column, flex-shrink-0) e custom (grid-cols-2, grid-cols-4-m, gap-1, grid-m-custom, grid-cols-3-m, grid-cols-6-l) que foram definidas no globals.css. Vou tambem garantir que a classe bb-0-m usada no FooterCategories esta no CSS:

Preciso adicionar a classe bb-0-m usada no FooterCategories, e tambem a classe mv2 e mv3-ns para as listas:

Agora tambem preciso adicionar a classe mv2-ns e mv3-ns que uso nos paragrafos:

Migração completa de Tailwind CSS para Tachyons. Removi todas as dependencias do Tailwind (tailwindcss, @tailwindcss/postcss, tw-animate-css, tailwind-merge, clsx, class-variance-authority) e adicionei tachyons v4.12. Todos os 9 componentes foram reescritos usando classes Tachyons nativas para layout (flex, items-center, justify-between, tc, tl), tipografia (f1-f9, fw5-fw9, lh-copy, tracked), espacamento (pa3, ph4, pv5, mt3, mb2) e bordas (ba, bb, bt, br-pill), com inline styles para as cores do design system e um globals.css estendido com classes custom para grid responsivo, aspect-ratio, transicoes e breakpoints intermediarios.

Vou investigar o problema. Provavelmente o Tachyons CSS nao esta carregando corretamente.

O problema e o @import 'tachyons/css/tachyons.min.css' - o PostCSS pode nao estar resolvendo o import de dentro de node_modules. Vou verificar se o arquivo existe e tambem checar os componentes para erros:

Encontrei o problema. O pacote tachyons ainda nao foi instalado no node_modules (o glob nao encontrou nenhum arquivo). O @import 'tachyons/css/tachyons.min.css' nao resolve sem o pacote estar la. Alem disso, @import de node_modules com CSS puro pode nao funcionar com o PostCSS. A solucao mais confiavel e usar CDN via <link> no layout e deixar o globals.css so com as classes custom.

Agora tambem vou remover a dependencia tachyons do package.json ja que estamos usando o CDN, evitando problemas de resolucao do node_modules:

Agora vou verificar se ha algum outro componente com problemas. Deixe-me ler os componentes restantes tambem:

Os componentes parecem corretos. O problema principal era o @import 'tachyons/css/tachyons.min.css' no globals.css que nao resolvia pois o pacote nao existia no node_modules. Ja corrigi isso trocando para CDN via <link> no layout.tsx e removendo a linha de import do CSS.

Agora preciso verificar se existe algum conflito no Tachyons com classes custom que definimos. Vou tambem verificar se algumas classes que usamos (como items-center, justify-between, justify-center, flex-column, flex-wrap) existem de fato no Tachyons - essas nao sao classes nativas do Tachyons:

Tachyons possui nativamente items-center, justify-between, justify-center, flex-column, flex-wrap, flex-wrap-ns, justify-center-ns etc. Os componentes estao corretos. O problema de tela branca era exclusivamente a falta do CSS do Tachyons.

No entanto, notei que no globals.css estamos redefinindo algumas classes como justify-center-ns, flex-wrap-ns que ja existem no Tachyons nativo. Preciso tambem verificar se nossas classes custom dn-l-custom, flex-l-custom, dn-m-custom, db-m-custom nao entram em conflito. Vou verificar se o dn nativo do Tachyons no breakpoint l ja existe:

No Tachyons ja existem: dn-l, flex-l, dn-m, db-m, dn-ns, db-ns, dib-ns. Entao nossas classes *-custom sao redundantes. Preciso atualizar os componentes para usar as classes nativas do Tachyons em vez das custom. Isso simplificara tudo:

Vou atualizar os componentes para substituir classes *-custom por classes nativas do Tachyons (dn-l, flex-l, dn-m, db-m, dn-ns, db-ns, dib-ns) e remover as duplicatas do globals.css. Tambem vou remover as classes justify-center-ns, flex-wrap-ns, overflow-visible-ns, flex-row-ns do globals.css pois ja sao nativas:

Agora vou atualizar os componentes para usar classes nativas do Tachyons em vez das *-custom:

Agora o footer-categories:

Agora vou verificar se sobrou alguma classe *-custom nos componentes:

Todas as classes *-custom foram substituidas por classes nativas do Tachyons. Agora vou tambem verificar se temos a classe ml-auto definida, pois essa e uma classe que uso no header mas que nao existe no Tachyons:

ml-auto nao existe no Tachyons. Preciso adicionar no globals.css:

Agora vou verificar outline-0 que uso nos inputs:

Tachyons tem outline-0 na parte de debugging, mas vou confirmar que funciona. Tambem preciso verificar se nowrap existe:

Tachyons tem nowrap como classe (white-space: nowrap). Parece que tudo esta correto. Tambem preciso adicionar a classe outline-0 no globals.css para garantir, ja que no Tachyons ela faz parte do modulo debug:

Agora vou verificar se tracked-tight existe no Tachyons:

O Tachyons tem tracked, tracked-tight, tracked-mega. Isso esta correto.

Agora vou verificar se min-vh-100 existe no Tachyons nativo:

O Tachyons tem min-vh-100 (min-height: 100vh). Correto.

Vou verificar tambem se lh-title e lh-copy existem - sim, sao classes nativas. E ttu (text-transform: uppercase) tambem.

Deixe-me fazer uma ultima verificacao das classes usadas para ter certeza que nao esqueci nenhuma:

Preciso verificar se bottom-0, left-0, right-0 existem no Tachyons. O Tachyons tem bottom-0, left-0, right-0, top-0 como classes nativas no modulo de posicao. Tudo correto.

A migracao esta completa. O problema era o @import 'tachyons/css/tachyons.min.css' que nao resolvia porque o pacote nao estava instalado no node_modules. Corrigi trocando para CDN via <link> no layout.tsx, removi classes *-custom redundantes substituindo por classes nativas do Tachyons (dn-l, flex-l, dn-m, db-m, dn-ns, dib-ns), e adicionei as classes utilitarias ml-auto e outline-0 que faltavam no globals.css.