Usando
O que são atalhos?
Atalhos são uma combinação de utilitários de cores e tamanhos permitindo alterar as duas propriedades de uma vez só.
<divclassName="mx-auto w-fit my-8"><FaRegGrinTongueSquintclassName="icon-sky-900-7xl dark:icon-sky-500-7xl" /></div>Usando
Uso dos atalhos
Você não precisa usar os atalhos, você pode usar os utilitários de ícones combinados, sem nenhum problema.
<divclassName="mx-auto w-fit my-8"><FaRegGrinTongueSquintclassName="icon-sky-900 icon-6xl dark:icon-sky-500 dark:icon-6xl" /></div>Entretando, eles podem ser muito úteis, especialmente com o uso de variantes, digitando menos código e deixando mais claro no código o que está sendo alterado.
O código abaixo renderiza o mesmo resultado do exemplo acima, mas usa atalhos na variante
dark.
<divclassName="mx-auto w-fit my-8"><FaRegGrinTongueSquintclassName="icon-sky-900 icon-6xl dark:icon-sky-500-6xl" /></div>