Olá, pessoal! Tudo bem?
Se você está acompanhando o projeto Alfabit utilizando a versão mais recente do Tailwind (v4), provavelmente tomou um susto na aula sobre opacidade.
Quando seguimos os passos do vídeo (separar as cores em RGB, tirar o formato Hexadecimal e criar aquela função com opacityValue dentro do tailwind.config.js), o Tailwind v4 não entende a sintaxe antiga e o nosso componente simplesmente quebra, deixando o botão invisível (fundo transparente com texto branco).
Eu tentei adaptar o código da aula de várias formas, mas ao consultar a documentação do Tailwind v4, percebi que houve um salto gigantesco de simplicidade. A versão nova faz esse cálculo de opacidade nativamente por baixo dos panos!
Ou seja: não precisamos de funções complexas e podemos continuar usando o Hexadecimal limpo que copiamos do Figma!
Para quem quer continuar a aula na versão 4 sem dor de cabeça, aqui está a adaptação:
- Limpe o seu tailwind.config.js
Nós não precisamos mais ensinar o Tailwind a ler cores. Você pode deixar o bloco extend vazio (ou remover a parte de colors dele):
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {}, /* Limpamos as configurações de cores daqui! */
},
plugins: [],
}
- A mágica do @theme no globals.css
No Tailwind v4, usamos a diretiva @theme para criar a classe automaticamente, e o @layer base para guardar nossas variáveis em Hexadecimal. O seu globals.css deve ficar assim:
CSS
@import "tailwindcss";
@config "../tailwind.config.js";
/* O Tailwind v4 lê isso e cria a classe bg-primary automaticamente, já com suporte a opacidade! */
@theme {
--color-primary: var(--tema-primario);
}
@layer base {
:root {
--tema-primario: #2D5BFF; /* Pode usar o Hexadecimal copiado do Figma! */
}
.theme-violet {
--tema-primario: #AF4BFE;
}
}
- Limpe o Cache!
Sempre que fizer essa mudança estrutural:
Pare o servidor do Storybook no terminal (Ctrl + C).
Apague a pasta .cache que fica escondida dentro de node_modules.
Rode npm run storybook novamente.
Pronto! Seus botões vão voltar a aparecer e, se você testar colocar um bg-opacity-50 ou um hover:opacity-90, vai ver que a transparência funciona perfeitamente, mesmo usando Hexadecimal.
Espero que essa dica ajude a destravar quem parou por aqui. Bons estudos para nós, e vamos em frente!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!