Use espessura de decoração de texto em Tailwind CSS

Este artigo ensinará como usar os utilitários de espessura de decoração de texto no Tailwind CSS, uma estrutura utilitária para web design. Você aprenderá como aplicá-los de forma responsiva e personalizá-los.

Exemplos

tailwind css espessura de decoração de texto simples.

<!DOCTYPE html>
<html lang="en">

<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>How to Use Text Decoration Thickness in Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="underline decoration-auto">
        Tailwind CSS Text Decoration Thickness
    </p>

    <p class="underline decoration-from-font">
        Tailwind CSS Text Decoration Thickness
    </p>
    <p class="underline decoration-0">Tailwind CSS Text Decoration Thickness</p>
    <p class="underline decoration-1">Tailwind CSS Text Decoration Thickness</p>
    <p class="underline decoration-2">Tailwind CSS Text Decoration Thickness</p>
    <p class="underline decoration-4">Tailwind CSS Text Decoration Thickness</p>
    <p class="underline decoration-8">Tailwind CSS Text Decoration Thickness</p>
</body>

</html>

espessura da decoração de texto em tailwind css

espessura da decoração do texto tailwind css com cor.

<!DOCTYPE html>
<html lang="en">
  <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>How to Use Text Decoration Thickness in Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p class="underline decoration-2 decoration-blue-500">
      Tailwind CSS Text Decoration Thickness With Color
    </p>
    <p class="underline decoration-2 decoration-green-500">
      Tailwind CSS Text Decoration Thickness With Color
    </p>
    <p class="underline decoration-2 decoration-red-500">
      Tailwind CSS Text Decoration Thickness With Color
    </p>
    <p class="underline decoration-2 decoration-yellow-500">
      Tailwind CSS Text Decoration Thickness With Color
    </p>
  </body>
</html>

espessura da decoração do texto css tailwind com cor

espessura da decoração do texto tailwind css com cor e estilo.

<!DOCTYPE html>
<html lang="en">
  <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>How to Use Text Decoration Thickness in Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p class="underline decoration-2 decoration-solid decoration-blue-500">
      Tailwind CSS Text Decoration Thickness With Color and Style
    </p>
    <p class="underline decoration-2 decoration-double decoration-green-500">
      Tailwind CSS Text Decoration Thickness With Color and Style
    </p>
    <p class="underline decoration-2 decoration-dotted decoration-red-500">
      Tailwind CSS Text Decoration Thickness With Color and Style
    </p>
    <p class="underline decoration-2 decoration-dashed decoration-yellow-500">
      Tailwind CSS Text Decoration Thickness With Color and Style
    </p>
    <p class="underline decoration-2 decoration-wavy decoration-purple-500">
        Tailwind CSS Text Decoration Thickness With Color and Style
      </p>
  </body>
</html>

espessura de decoração de texto tailwind css com cor e estilo

tailwind css pairar espessura da decoração do texto.

<p class="underline hover:decoration-4">
  Tailwind CSS hover Text Decoration Thickness
</p>

espessura da decoração de texto responsivo tailwind css.

<p class="underline md:decoration-4">
  Tailwind CSS Responsive Text Decoration Thickness
</p>

#tailwindcss