No global.css foi definido o prefix como --text- e no tailwind.config.js foi colocado --font-
/* Font Size */
--text-xs: 12px;
--text-sm: 14px;
--text-nd: 16px;
--text-lg: 18px;
--text-xl: 20px;
fontSize: {
xs: 'var(--font-xs)',
sm: 'var(--font-sm)',
md: 'var(--font-md)',
lg: 'var(--font-lg)',
xl: 'var(--font-xl)',
}
Sim, a nomenclatura da variável está errada. No arquivo global.css, o prefixo das variáveis de tamanho de fonte é -text-, enquanto no arquivo tailwind.config.js é -font-. Isso causa um conflito, pois as variáveis -text-xs, -text-sm, etc. não são reconhecíveis pelo Tailwind.
Para corrigir esse problema, é necessário alterar o prefixo das variáveis de tamanho de fonte em um dos dois arquivos. A maneira mais fácil de fazer isso é alterar o prefixo no arquivo global.css para -font-. Isso garantirá que as variáveis sejam reconhecíveis pelo Tailwind e que o código continue funcionando como esperado.
Aqui está a alteração necessária no arquivo global.css:
CSS
/* Font Size */
--font-xs: 12px;
--font-sm: 14px;
--font-md: 16px;
--font-lg: 18px;
--font-xl: 20px;
Após essa alteração, o código funcionará como esperado, pois as variáveis -font-xs, -font-sm, etc. serão reconhecíveis pelo Tailwind.
Outra opção é alterar o prefixo das variáveis de tamanho de fonte no arquivo tailwind.config.js para -text-. Isso também garantirá que as variáveis sejam reconhecíveis pelo Tailwind e que o código continue funcionando como esperado.
Aqui está a alteração necessária no arquivo tailwind.config.js:
JavaScript
theme: {
fontSize: {
xs: 'var(--text-xs)',
sm: 'var(--text-sm)',
md: 'var(--text-md)',
lg: 'var(--text-lg)',
xl: 'var(--text-xl)',
},
},
Após essa alteração, o código funcionará como esperado, pois as variáveis -text-xs, -text-sm, etc. serão reconhecíveis pelo Tailwind.
A escolha de qual alteração fazer depende da sua preferência. espero ter ajudado!