[Dúvida] Não consegui configurar nem a cor de fundo nem a fonte

<!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"> <title>Alura Newsletter</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { azul: { claro: '#C5DFFF', escuro: '#061E3C', hover: '#1057B0' }, }, fontFamily: { inter: ['Inter', sans-serif] } } } } </script> </head> <body class="bg-azul-claro font-inter"> <main class=""> <section class=""> <img class="" src="image/icone-mergulhador.svg" alt="icone de mergulhador"> </section> <section class=""> <div class=""> <svg class="" width="35" height="20" viewBox="0 0 44 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M41.1738 0.994633C40.8556 1.10918 40.6199 1.34129 40.4506 1.70905C40.3201 1.99542 40.2881 2.17026 40.3041 2.53199C40.3178 2.86056 40.3659 3.0776 40.4734 3.28861C40.5444 3.42728 41.7665 5.17565 41.9221 5.36254C41.9748 5.42584 42.0984 5.52834 42.1945 5.58561C42.3661 5.69413 42.373 5.69714 42.6545 5.69714C42.9291 5.69714 42.9474 5.69413 43.1237 5.59465C43.3663 5.45599 43.5722 5.19373 43.6912 4.86818C43.8034 4.56673 43.8285 4.34366 43.7874 4.00303C43.753 3.69255 43.7004 3.52374 43.5814 3.31574C43.4784 3.13789 42.4096 1.60958 42.2242 1.37445C41.9519 1.03081 41.5171 0.874056 41.1738 0.994633Z" /> ...

Oi Etiene, tudo bem?

Notei que você está tentando importar o Tailwind CSS através de um script diretamente no HTML, o que pode estar causando o problema.

No trecho de código:

<script src="https://cdn.tailwindcss.com"></script>

Você está tentando importar o Tailwind CSS de um CDN que não existe. O Tailwind CSS não fornece um CDN oficial para importar o arquivo CSS.

Em vez disso, o Tailwind CSS precisa ser instalado e configurado em seu projeto local usando Node.js e PostCSS. Aqui está um exemplo de como você pode fazer isso:

Instale o Tailwind via npm (ou yarn) em seu projeto:

npm install tailwindcss

Crie um arquivo de configuração do Tailwind CSS:

npx tailwindcss init

Isso irá criar um arquivo tailwind.config.js em seu diretório de projeto.

No arquivo de configuração, você pode personalizar seu tema como fez em seu script:

module.exports = {
  theme: {
    extend: {
      colors: {
        azul: {
          claro: '#C5DFFF',
          escuro: '#061E3C',
          hover: '#1057B0'
        },
      },
      fontFamily: {
        inter: ['Inter', sans-serif]
      }
    }
  },
  variants: {},
  plugins: [],
}

Em seguida, você precisa criar um arquivo CSS onde você irá importar o Tailwind CSS. Você pode chamar esse arquivo de styles.css e colocá-lo na raiz do seu projeto:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Agora, você precisa configurar o PostCSS para transformar o arquivo CSS com Tailwind. Você pode fazer isso criando um arquivo postcss.config.js na raiz do seu projeto:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Finalmente, você precisa usar uma ferramenta para construir o arquivo CSS final. Uma opção é usar o próprio CLI do Tailwind:

npx tailwindcss build styles.css -o output.css

Isso irá gerar um arquivo output.css que contém seu CSS final. Você pode então referenciar este arquivo em seu HTML:

<link href="/path/to/your/output.css" rel="stylesheet">

Lembre-se de substituir "/path/to/your/output.css" pelo caminho real do seu arquivo CSS.

Espero ter ajudado!

Caso surjam dúvidas, fico à disposição.

Abraços e bons estudos!

Mergulhe em programação