Tailwind CSS 文本装饰颜色

想要使用 Tailwind CSS 更改文本装饰颜色吗？本文将向您展示如何使用 text-decoration-color 实用程序类并使用您自己的颜色对其进行自定义。

例子

Tailwind CSS 简单文本装饰颜色。

<!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>Tailwind CSS Text Decoration Color Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p>
      Tailwind CSS Text Decoration
      <a href="#" class="underline decoration-blue-600">Color</a>
    </p>
    <p>
      Tailwind CSS Text Decoration
      <a href="#" class="underline decoration-green-600">Color</a>
    </p>
    <p>
      Tailwind CSS Text Decoration
      <a href="#" class="underline decoration-red-600">Color</a>
    </p>
    <p>
      Tailwind CSS Text Decoration
      <a href="#" class="underline decoration-indigo-500">Color</a>
    </p>

    <p>
      Tailwind CSS Text Decoration
      <a href="#" class="underline decoration-yellow-500">Color</a>
    </p>
  </body>
</html>

tailwind css 文本装饰颜色，带下划线、上划线、下划线。

<!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>Tailwind CSS Text Decoration Color Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p class="underline decoration-blue-600">
      Tailwind CSS Text Decoration Color with Underline
    </p>
    <p class="overline decoration-green-600">
      Tailwind CSS Text Decoration Color with Overline
    </p>
    <p class="line-through decoration-red-600">
      Tailwind CSS Text Decoration Color with Line Through
    </p>
  </body>
</html>

tailwind css 文本装饰颜色与不透明度。

<!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>Tailwind CSS Text Decoration Color Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <p class="underline decoration-blue-600/25">
      Tailwind CSS Text Decoration Color with Opacity
    </p>
    <p class="underline decoration-blue-600/30">
      Tailwind CSS Text Decoration Color with Opacity
    </p>
    <p class="underline decoration-blue-600/50">
      Tailwind CSS Text Decoration Color with Opacity
    </p>
    <p class="underline decoration-blue-600/75">
      Tailwind CSS Text Decoration Color with Opacity
    </p>
    <p class="underline decoration-blue-600/[.33]">
      Tailwind CSS Text Decoration Color with Opacity
    </p>
  </body>
</html>

Tailwind CSS 悬停文本装饰颜色。

<a class="underline decoration-blue-400 hover:decoration-blue-700">
  Tailwind CSS hover Text Decoration Color
</a>

Tailwind CSS 响应式文本装饰颜色。

<p class="underline decoration-blue-400 lg:decoration-blue-600">Tailwind CSS Responsive Text Decoration Color</p>

Tailwind CSS 自定义文本装饰颜色。

<p class="underline decoration-[#ff00ff]">Tailwind CSS Custom Text Decoration Color</p>

#tailwindcss

Tailwind CSS 文本装饰颜色 - 如何更改它