Text-based MMORPG com JavaScript
Entenda o processo de criação de um jogo MMORPG web com JavaScript
Adicionando CSS Complexo
Por padrão o Tailwind não suporta CSS mais complexo, por exemplo eu quero adicionar um fundo gradiente atrás da imagem do personagem para dar um ar mais legal, como eu faria isso?
background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
Esse código faz exatamente o que eu quero, mas como eu adiciono isso no meu projeto?
Existem duas possibilidades, a primeira seria adicionar esse código css no proprio arquivo index.tsx, mas isso deixaria o arquivo maior e seria mais complicado para dar manutenção nesse código no futuro, no nosso caso eu vou no arquivo globals.css e vou adicionar a classe golden-gradient.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.golden-gradient {
background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
}
Assim esse código passa a estar disponivel para ser usado em qualquer lugar do projeto, para usar basta adicionar a classe golden-gradient no elemento que você quer que tenha esse fundo.
<div className="h-full w-fit golden-gradient p-2">
<Image src="/rouge.png" alt="Logo" width={0}
height={0}
sizes="100vw"
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
</div>