linha no body não funciona | Tailwind CSS: estilizando a sua página com classes utilitárias

2
respostas

por Daniel Mendonça moutinho

| 95.1k xp | 9 posts

Boa tarde, estou utilizando a linha como instruido pela instrutota, só que na pagina web não tem alteração, o que pode estar ocorrendo?

Segue abaixo codigo html:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Olá Tailwind!</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class= ”bg-gradient-to-r from-purple-400 to-blue-600”>
      <main class="">
        <img class="" src="./image/logo-tailwind.png" alt="Logo Tailwind CSS">
        <h1 class="">Olá Tailwind CSS!</h1>
        <img class="" src="./image/logo-tailwind.png" alt="Logo Tailwind CSS">
    </main>

</body>

2 respostas

por NATHALIA QUEIROZ

| 1292.7k xp | 3007 posts

Alura Scuba Team Pessoa Monitora de Fórum Ops

16/10/2023

Oii, Daniel! Tudo bem?

Parabéns por colocar em prática os exercícios da aula, você está no caminho certo! Ao revisar o seu código, notei aum erro de sintaxe, o que é bem comum, não se preocupe. Vamo revisar juntos:

No código, a classe está escrita como bg-gradient-to-r está com aspas que não é reconhecida pelo HTML. Recomendo alterar, utilizando aspas que o HTML aceita, por exemplo:

<body class= "bg-gradient-to-r from-purple-400 to-blue-600">

Realize a correção, salve o arquivo e atualize a página, observe se o código comporta como esperado.Outro ponto imporante de se atentar é verificar se está importando corretamente o Tailwind CSS no seu projeto.

Espero que após as correções dê certo! Continue interagindo no fórum compartilhando dúvidas, sugestões e projetos.

Bons estudos, Daniel!

por Elias da Silva de Moura

| 69.2k xp | 6 posts

09/11/2023

O meu tb não funciona. Copiei e colei a linha que você passoui para o Daniel e não funcionou. Se eu aplicar um bg-blue-400 ele fuciona.

Fui até a documentação e peguei um exemplo de gradient lá e tb não fucionou.

Será que é algo com a minha intalação do tailwind?

Eu fiz a instalação via terminal com:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Confome o passo a passo da doc.

Meu tailwind.config.js está assim:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tentei isso mas n funcionou. https://stackoverflow.com/questions/64913959/issue-with-tailwind-css-gradient

Via CDN funciona normal. Então acho que é alguma configuração do tailwind...