Olá, pessoal! Tudo bem?
Estou seguindo o projeto Alfabit e, como gosto de me manter atualizada, acabei instalando as versões mais recentes das ferramentas (Tailwind v4 e Storybook 10). Logo de cara, percebi que algumas coisas mudaram bastante em relação ao que o professor mostra no vídeo, e isso pode travar o projeto se a gente não fizer alguns ajustes.
Como já estou com o projeto rodando redondinho por aqui, resolvi compartilhar com vocês o que precisei adaptar para superar essa "barreira das versões". Espero que ajude quem estiver passando pelos mesmos erros!
- Tailwind v4: O fim do @tailwind base
No vídeo, o professor usa três linhas para importar o Tailwind. No v4, isso mudou para uma única importação. No seu globals.css, deixe assim:
CSS
@import "tailwindcss"; /* Padrão da versão 4 */
@config "../tailwind.config.js";
@layer base {
:root {
--primary: #2D5BFF;
}
.theme-violet {
--primary: #AF4BFE;
}
}
2. Storybook 10: O mistério do @storybook/blocks
Se você tentar instalar o @storybook/blocks na versão 10, vai dar erro de dependência. Isso acontece porque esse pacote agora é legado. A solução moderna é importar os blocos direto do addon de documentação.
No seu arquivo Intro.mdx, faça essa troca:
Errado: import { Meta } from '@storybook/blocks';
Correto: import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
- Dica de Ouro: Não esqueça o ...props no Button!
O professor simplifica o componente no vídeo, mas se você remover o ...props, suas variações (como o botão desabilitado) podem parar de funcionar. Minha sugestão é manter assim:
TypeScript
const Button = ({ children, className = '', ...props }: ButtonProps) => {
return (
<button
className={bg-primary text-white rounded-[8px] px-[32px] py-[12px] ${className}}
{...props} // Isso garante que onClick e disabled continuem funcionando!
>
{children}
);
};
4. A "Faxina" Necessária
Se você tentou instalar versões diferentes e o Storybook começou a dar erro de Failed to fetch, o melhor é limpar a casa. Rode esses comandos no terminal:
npm uninstall @storybook/blocks (remova o pacote antigo)
Apague a pasta node_modules e o arquivo package-lock.json
Rode npm install novamente
npm run storybook
Dá um pouquinho mais de trabalho no começo, mas o projeto fica muito mais moderno e estável! Qualquer dúvida, vamos nos ajudando por aqui.
Bons estudos a todos!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!