1
resposta

[Dúvida] Usando o Tailwind para o CSS

Estava pensando em usar o Tailwind nesse projeto ao invés do CSS puro, mas não sei como posso configurar nele as estilizações iniciais mostradas na aula. No caso, queria "transferir" esse código para o Tailwind. Se puderem me ajudar, serei grato

Código CSS usado na aula:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --azul-escuro: #041833;
  --azul-medio: #1875E8;
  --cor-fonte-principal: #041833;
  --cor-fonte-post: #444444;
  --branco: #FFF;
  --fonte-principal: 'Raleway', sans-serif;
  --fonte-secundaria: 'Playfair Display', sans-serif;

  font-family: var(--fonte-principal);
}

#root {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

a, button, input, textarea {
  font: inherit;
  color: inherit;
}

button {
  background-color: transparent;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 5rem;
}
1 resposta

Olá Gustavo, tudo bem?

Usar o Tailwind CSS é uma ótima escolha para agilizar o processo de estilização em seu projeto. Para "transferir" as estilizações iniciais mostradas na aula para o Tailwind, você pode utilizar as classes pré-definidas do próprio framework.

Por exemplo, para aplicar o estilo de fonte principal, você pode usar a classe "font-raleway". Para aplicar a cor de fundo branca, você pode usar a classe "bg-white". E assim por diante.

Você pode conferir a lista completa de classes disponíveis no site oficial do Tailwind. Além disso, você pode personalizar as cores e estilos do Tailwind de acordo com as suas necessidades.

Espero ter ajudado e bons estudos!