Olá.
Nessa aula o instrutor mostrou como customizar a seção de screens no Tailwind.
No globals.css, ele definiu as seguintes variáveis:
--screen-mobile: 640px;
--screen-tablet: 1024px;
--screen-desktop: 1440px;
--screen-tv: 1920px;
E no tailwind.config.ts, usou essa variáveis na seção de screens:
theme: {
screens: {
mobile: 'var(--screen-mobile)',
tablet: 'var(--screen-tablet)',
desktop: 'var(--screen-desktop)',
tv: 'var(--screen-tv)',
},
}
Por fim, ele demonstrou o uso no componente Button, adicionando tablet:text-sm no className:
className={`
bg-primary rounded-[8px] px-[32px] py-[12px] text-[#FFF] tablet:text-sm
${className}
`}
No entanto, ele não mostrou o resultado visualmente, o que foi estranho. Então, quando testei no Storybook, isso não funcionou. Testei para todas as variações de tela, mobile, tablet, desktop e tv, sem sucesso.
Fiz um teste e, ao invés de usar as variáveis CSS definidas em globals.css, eu coloquei os tamanhos diretamente no tailwind.config.ts:
theme: {
screens: {
'mobile': '640px',
'tablet': '1024px',
'desktop': '1440px',
'tv': '1920px',
},
}
Para minha surpresa, isso funcionou.
Fica então a minha dúvida: por que para cores o Tailwind entende variáveis CSS, mas para tamanhos de tela não?
Obrigado.
