Passo 9

Instruções

Agora você vê que a largura do elemento é metade do tamanho do body. Isso funciona bem para dispositivos maiores mas não tão bem para dispositivos menores. Tailwind CSS segue uma abordagem mobile-first no design. Então, se você quiser criar designs responsivos para outros dispositivos, pode usar as variantes responsivas do Tailwind como md e lg assim:

<p class="lg:w-2/3">This is a percentage width.</p>

O exemplo a seguir definirá a largura para 66% do elemento pai para tamanhos de dispositivo de 1024px e superiores. Dentro da sua tag de abertura div, modifique seu w-1/2 para que ele seja aplicado apenas a tamanhos de dispositivo de 768px e superiores. Você pode prefixar esta classe com a variante md.

O que fazer:

Testes:

Sua tag de abertura `div` deve ter a classe utilitária `md:w-1/2`.
Você não deve mais ter a classe `w-1/2` na sua tag de abertura `div`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    
    <div class="bg-red-100 border-2 border-red-300 rounded-md w-1/2">
    
      <p>
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>

Preview