[Dúvida] Recomendação para o uso com tailwind.config.ts

Oi

O problema que você está enfrentando ocorre devido à incompatibilidade de tipos na função primary. A função espera receber um objeto com a propriedade opacityValue do tipo string, mas está recebendo uma função que retorna uma string.

Uma maneira de resolver esse problema é modificar a função primary para que ela receba diretamente o valor de opacidade como uma string. Aqui está um exemplo de como fazer isso:

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--primary)',
          opacityValue: 'var(--primary-opacity)',
        },
      },
    },
  },
  plugins: [],
};
export default config;

Dessa forma, você pode definir o valor de opacidade no seu arquivo de estilos e utilizar a mesma técnica que foi ensinada no curso.

Boa tarde

Obrigado pelo retorno.

1 - Ainda assim, será necessário definir manualmente cada valor de opacidade em variável, não teria uma forma de usar igual ao formato do curso, no caso definir uma cor customizada, mas por padrão já ter um preset de opções de opacidades pré-definidas, igual a quando se utiliza uma classe de cor e opacidade padrão do tailwind?

Caso não seja possível, seria uma prática adequada em alterar o arquivo tailwind.config.ts para .js? acredito que irá ocorrer incompatibilidade da versão instalada do pacote e acredito também que seria mais conveniente utilizar o tailwind com typescript por ser o padrão ao se instalar o next na sua última versão, porém desde que houvesse uma forma de se aproveitar a questão da opacidade pré-definida e demais recursos. (Resultado: chegou a não dar erro, porém mesmo trocando para .js não renderizou)

2 - Inclusive, avançando na próxima aula "Outros Design Tokens" a parte da criação da função toRgba também não funcionou

Obrigado.

Boa tarde

Para compartilhar uma abordagem que funcionou para mim,

1 - Um dos problemas, é que nas variáveis de configuração estava definindo o rgb (como no exemplo em --secondary) ao invés de somente a numeração...havia trocado apenas para ter a exibição da cor em uma extensão que uso no VSCODE, mas isso não irá funcionar, deve-se manter igual ao exemplo em --primary

2 - Outra ação necessária, pois utilizando o arquivo tailwind.config.ts, não foi possível definir função customizável toRgba(), mas procurei como ficará o arquivo no último curso dessa formação, assim como na sessão Desafio desse mesmo curso e notei que foi substituído pelo código abaixo e sem a necessidade de criar uma função própria toRgba(), conforme abaixo

  theme: {
    extend: {
      colors: {
        primary: 'rgba(var(--primary), <alpha-value>)',
      },
    },
  },

Obrigado.

Felipe D.R