Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Background não funciona no Tailwind

Referente ao curso Tailwind CSS: estilizando a sua página com classes utilitárias, no capítulo Olá Tailwind CSS! e atividade Primeiros passos

por Estudante
| 46.7k xp | 6 posts

De acordo com a aula, todas as classes funciona, menos o background do gradiente. Eu não consegui achar o problema, será que alguém pode me ajudar nesta situação? já tentei de outras cores, mas não funciona em nenhum "bg". Aonde está o erro?

<!DOCTYPE html>
<html lang="pt-br">

<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="mx-0 my-0 bg-white flex flex-col   lg:flex-row items-center w-4/5 mx-auto my-40 p-12 shadow-2x1 opacity-50 w-1/5 ">
        <img class="w-2/5 lg:w-1/5" src="./image/logo-tailwind.png" alt="Logo Tailwind CSS">
        <h1 class="text-4xl font-black text-center lg:text-6xl">Olá Tailwind CSS!</h1>
        <img class="w-2/5 lg:w-1/5" src="./image/logo-tailwind.png" alt="Logo Tailwind CSS">
    </main>

</body>

</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
por Ricardo Castro Adorno
| 205k xp | 6 posts

Eu testei aqui o código e a classes está certa, mas quando usa no body não funciona, só se você colocar direto na tag "main"

Minha aposta é que esse código do tailwind usando o link da cnd não comporta estilos no body, então minha recomendação é fazer uma div que cubra todo o body e adicione os estilos nela ao invés de colocar classes no body

solução!
por Rafael de Jesus Bento
| 17.2k xp | 2 posts
Assistente administrativo

Parece que o problema está na forma como você está importando o Tailwind CSS e utilizando classes. O Tailwind CSS não é importado como um script JavaScript, mas sim é utilizado via classes CSS em seu HTML.

Aqui estão alguns ajustes que você pode fazer para corrigir o problema:

  1. Remova a importação do script do Tailwind CSS: O Tailwind CSS não precisa ser importado como um script. Você deve importá-lo no seu projeto usando uma ferramenta de build como npm, e então referenciar o arquivo CSS gerado no seu HTML.

    <!-- Exemplo de importação do Tailwind CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

    Certifique-se de que a versão do Tailwind CSS no link acima corresponde à que você deseja usar.

  2. Corrija as classes CSS no seu HTML: Certifique-se de usar corretamente as classes do Tailwind CSS para aplicar estilos. No seu exemplo, você está tentando aplicar um gradiente de fundo usando classes como bg-gradient-to-r, from-purple-400, e to-blue-600. Essas classes devem estar corretamente definidas após a importação do Tailwind CSS.

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

    Certifique-se de que essas classes estão disponíveis no seu ambiente de desenvolvimento do Tailwind CSS.

  3. Verifique o estilo do elemento main: No elemento <main>, você está aplicando várias classes, mas algumas delas podem não estar sendo aplicadas corretamente se o Tailwind CSS não estiver configurado corretamente ou se as classes não forem reconhecidas.

    <main class="mx-auto my-40 p-12 shadow-2xl">
    <!-- Conteúdo do main -->
</main>

    Simplifique as classes aplicadas temporariamente para garantir que o problema não seja devido a conflitos ou erros nas classes mais complexas.

  4. Verifique se as imagens estão sendo carregadas corretamente: Certifique-se de que os caminhos das imagens estão corretos (./image/logo-tailwind.png). Se as imagens não estiverem sendo exibidas corretamente, isso pode indicar problemas com os caminhos ou configurações de servidor.

Após realizar esses ajustes, seu HTML deve ficar algo assim:

<main class="mx-auto my-40 p-12 shadow-2xl">
    <img class="w-2/5 lg:w-1/5" src="./image/logo-tailwind.png" alt="Logo Tailwind CSS">
    <h1 class="text-4xl font-black text-center lg:text-6xl">Olá Tailwind CSS!</h1>
    <img class="w-2/5 lg:w-1/5" src="./image/logo-tailwind.png" alt="Logo Tailwind CSS">
</main>

depois disso seu código deve funcionar...