[Sugestão] Dica para erro de tipagem no tailwind.config.ts

Olá.

Segue uma dica, caso alguém tenha chegado até essa aula e recebido o seguinte erro:

Type '({ opacityValue }: { opacityValue: any; }) => string' is not assignable to type 'string | RecursiveKeyValuePair<string, string>'.ts(2322)

Nessa aula, o instrutor usou a seguinte função para criar a cor primary no tailwind.config.ts:

colors: {
    primary: ({ opacityValue }) => `rgba(var(--primary), ${opacityValue})`,
},

Nas versões atualizadas do Tailwind, esse tipo de abordagem foi descontinuado em favor da nova sintaxe para adicionar opacidade. Não vou entrar em muitos detalhes, mas vocês podem encontrar mais informações nos seguintes links (em inglês):

• https://github.com/tailwindlabs/tailwindcss/issues/13917
• https://tailwindcss.com/docs/customizing-colors#using-css-variables
• https://tailwindcss.com/docs/upgrade-guide#new-opacity-modifier-syntax

Então, para fazer a opacidade funcionar em versões atualizadas do Tailwind, precisa fazer dessa maneira:

tailwind.config.ts

colors: {
    primary: 'rgb(var(--primary))',
}

globals.css

:root {
    --primary: 45 91 255;
    /* restante das cores */
}

Observe que no globals.css os canais de cores são passados sem a vírgula entre eles.

E para alterar a opacidade, você adiciona /<valor_da_opacidade à cor.

Por exemplo, ao invés de passar ao className do <Button>:

bg-primary bg-opacity-50

Você agora passa assim:

bg-primary/50

E o Tailwind vai conseguir fazer a mágica dele.