Tailwind CSS - Text Decoration Color

Previous
Quiz
Next

Tailwind CSS Text Decoration Color is a collection of predefined classes used to apply colors to decorative elements such as underlines, overlines, and strike-throughs on text.

Tailwind CSS Text Decoration Color Classes

Below is a list of Tailwind CSS Text Decoration Color classes that include properties allowing you to choose colors for underlines, overlines, and strike-throughs on text.

Class CSS Properties
decoration-inherit text-decoration-color: inherit;
decoration-current text-decoration-color: currentColor;
decoration-transparent text-decoration-color: transparent;
decoration-black text-decoration-color: #000;
decoration-white text-decoration-color: #fff;
decoration-slate-50 text-decoration-color: #f8fafc;
decoration-slate-100 text-decoration-color: #f1f5f9;
decoration-slate-200 text-decoration-color: #e2e8f0;
decoration-slate-300 text-decoration-color: #cbd5e1;
decoration-slate-400 text-decoration-color: #94a3b8;
decoration-slate-500 text-decoration-color: #64748b;
decoration-slate-600 text-decoration-color: #475569;
decoration-slate-700 text-decoration-color: #334155;
decoration-slate-800 text-decoration-color: #1e293b;
decoration-slate-900 text-decoration-color: #0f172a;
decoration-slate-950 text-decoration-color: #020617;
decoration-gray-50 text-decoration-color: #f9fafb;
decoration-gray-100 text-decoration-color: #f3f4f6;
decoration-gray-200 text-decoration-color: #e5e7eb;
decoration-gray-300 text-decoration-color: #d1d5db;
decoration-gray-400 text-decoration-color: #9ca3af;
decoration-gray-500 text-decoration-color: #6b7280;
decoration-gray-600 text-decoration-color: #4b5563;
decoration-gray-700 text-decoration-color: #374151;
decoration-gray-800 text-decoration-color: #1f2937;
decoration-gray-900 text-decoration-color: #111827;
decoration-gray-950 text-decoration-color: #030712;
decoration-zinc-50 text-decoration-color: #fafafa;
decoration-zinc-100 text-decoration-color: #f4f4f5;
decoration-zinc-200 text-decoration-color: #e4e4e7;
decoration-zinc-300 text-decoration-color: #d4d4d8;
decoration-zinc-400 text-decoration-color: #a1a1aa;
decoration-zinc-500 text-decoration-color: #71717a;
decoration-zinc-600 text-decoration-color: #52525b;
decoration-zinc-700 text-decoration-color: #3f3f46;
decoration-zinc-800 text-decoration-color: #27272a;
decoration-zinc-900 text-decoration-color: #18181b;
decoration-zinc-950 text-decoration-color: #09090b;
decoration-neutral-50 text-decoration-color: #fafafa;
decoration-neutral-100 text-decoration-color: #f5f5f5;
decoration-neutral-200 text-decoration-color: #e5e5e5;
decoration-neutral-300 text-decoration-color: #d4d4d4;
decoration-neutral-400 text-decoration-color: #a3a3a3;
decoration-neutral-500 text-decoration-color: #737373;
decoration-neutral-600 text-decoration-color: #525252;
decoration-neutral-700 text-decoration-color: #404040;
decoration-neutral-800 text-decoration-color: #262626;
decoration-neutral-900 text-decoration-color: #171717;
decoration-neutral-950 text-decoration-color: #0a0a0a;
decoration-stone-50 text-decoration-color: #fafaf9;
decoration-stone-100 text-decoration-color: #f5f5f4;
decoration-stone-200 text-decoration-color: #e7e5e4;
decoration-stone-300 text-decoration-color: #d6d3d1;
decoration-stone-400 text-decoration-color: #a8a29e;
decoration-stone-500 text-decoration-color: #78716c;
decoration-stone-600 text-decoration-color: #57534e;
decoration-stone-700 text-decoration-color: #44403c;
decoration-stone-800 text-decoration-color: #292524;
decoration-stone-900 text-decoration-color: #1c1917;
decoration-stone-950 text-decoration-color: #0c0a09;
decoration-red-50 text-decoration-color: #fef2f2;
decoration-red-100 text-decoration-color: #fee2e2;
decoration-red-200 text-decoration-color: #fecaca;
decoration-red-300 text-decoration-color: #fca5a5;
decoration-red-400 text-decoration-color: #f87171;
decoration-red-500 text-decoration-color: #ef4444;
decoration-red-600 text-decoration-color: #dc2626;
decoration-red-700 text-decoration-color: #b91c1c;
decoration-red-800 text-decoration-color: #991b1b;
decoration-red-900 text-decoration-color: #7f1d1d;
decoration-red-950 text-decoration-color: #450a0a;
decoration-orange-50 text-decoration-color: #fff7ed;
decoration-orange-100 text-decoration-color: #ffedd5;
decoration-orange-200 text-decoration-color: #fed7aa;
decoration-orange-300 text-decoration-color: #fdba74;
decoration-orange-400 text-decoration-color: #fb923c;
decoration-orange-500 text-decoration-color: #f97316;
decoration-orange-600 text-decoration-color: #ea580c;
decoration-orange-700 text-decoration-color: #c2410c;
decoration-orange-800 text-decoration-color: #9a3412;
decoration-orange-900 text-decoration-color: #7c2d12;
decoration-orange-950 text-decoration-color: #431407;
decoration-amber-50 text-decoration-color: #fffbeb;
decoration-amber-100 text-decoration-color: #fef3c7;
decoration-amber-200 text-decoration-color: #fde68a;
decoration-amber-300 text-decoration-color: #fcd34d;
decoration-amber-400 text-decoration-color: #fbbf24;
decoration-amber-500 text-decoration-color: #f59e0b;
decoration-amber-600 text-decoration-color: #d97706;
decoration-amber-700 text-decoration-color: #b45309;
decoration-amber-800 text-decoration-color: #92400e;
decoration-amber-900 text-decoration-color: #78350f;
decoration-amber-950 text-decoration-color: #451a03;
decoration-yellow-50 text-decoration-color: #fefce8;
decoration-yellow-100 text-decoration-color: #fef9c3;
decoration-yellow-200 text-decoration-color: #fef08a;
decoration-yellow-300 text-decoration-color: #fde047;
decoration-yellow-400 text-decoration-color: #facc15;
decoration-yellow-500 text-decoration-color: #eab308;
decoration-yellow-600 text-decoration-color: #ca8a04;
decoration-yellow-700 text-decoration-color: #a16207;
decoration-yellow-800 text-decoration-color: #854d0e;
decoration-yellow-900 text-decoration-color: #713f12;
decoration-yellow-950 text-decoration-color: #422006;
decoration-lime-50 text-decoration-color: #f7fee7;
decoration-lime-100 text-decoration-color: #ecfccb;
decoration-lime-200 text-decoration-color: #d9f99d;
decoration-lime-300 text-decoration-color: #bef264;
decoration-lime-400 text-decoration-color: #a3e635;
decoration-lime-500 text-decoration-color: #84cc16;
decoration-lime-600 text-decoration-color: #65a30d;
decoration-lime-700 text-decoration-color: #4d7c0f;
decoration-lime-800 text-decoration-color: #3f6212;
decoration-lime-900 text-decoration-color: #365314;
decoration-lime-950 text-decoration-color: #1a2e05;
decoration-green-50 text-decoration-color: #f0fdf4;
decoration-green-100 text-decoration-color: #dcfce7;
decoration-green-200 text-decoration-color: #bbf7d0;
decoration-green-300 text-decoration-color: #86efac;
decoration-green-400 text-decoration-color: #4ade80;
decoration-green-500 text-decoration-color: #22c55e;
decoration-green-600 text-decoration-color: #16a34a;
decoration-green-700 text-decoration-color: #15803d;
decoration-green-800 text-decoration-color: #166534;
decoration-green-900 text-decoration-color: #14532d;
decoration-green-950 text-decoration-color: #052e16;
decoration-emerald-50 text-decoration-color: #ecfdf5;
decoration-emerald-100 text-decoration-color: #d1fae5;
decoration-emerald-200 text-decoration-color: #a7f3d0;
decoration-emerald-300 text-decoration-color: #6ee7b7;
decoration-emerald-400 text-decoration-color: #34d399;
decoration-emerald-500 text-decoration-color: #10b981;
decoration-emerald-600 text-decoration-color: #059669;
decoration-emerald-700 text-decoration-color: #047857;
decoration-emerald-800 text-decoration-color: #065f46;
decoration-emerald-900 text-decoration-color: #064e3b;
decoration-emerald-950 text-decoration-color: #022c22;
decoration-teal-50 text-decoration-color: #f0fdfa;
decoration-teal-100 text-decoration-color: #ccfbf1;
decoration-teal-200 text-decoration-color: #99f6e4;
decoration-teal-300 text-decoration-color: #5eead4;
decoration-teal-400 text-decoration-color: #2dd4bf;
decoration-teal-500 text-decoration-color: #14b8a6;
decoration-teal-600 text-decoration-color: #0d9488;
decoration-teal-700 text-decoration-color: #0f766e;
decoration-teal-800 text-decoration-color: #115e59;
decoration-teal-900 text-decoration-color: #134e4a;
decoration-teal-950 text-decoration-color: #042f2e;
decoration-cyan-50 text-decoration-color: #ecfeff;
decoration-cyan-100 text-decoration-color: #cffafe;
decoration-cyan-200 text-decoration-color: #a5f3fc;
decoration-cyan-300 text-decoration-color: #67e8f9;
decoration-cyan-400 text-decoration-color: #22d3ee;
decoration-cyan-500 text-decoration-color: #06b6d4;
decoration-cyan-600 text-decoration-color: #0891b2;
decoration-cyan-700 text-decoration-color: #0e7490;
decoration-cyan-800 text-decoration-color: #155e75;
decoration-cyan-900 text-decoration-color: #164e63;
decoration-cyan-950 text-decoration-color: #083344;
decoration-sky-50 text-decoration-color: #f0f9ff;
decoration-sky-100 text-decoration-color: #e0f2fe;
decoration-sky-200 text-decoration-color: #bae6fd;
decoration-sky-300 text-decoration-color: #7dd3fc;
decoration-sky-400 text-decoration-color: #38bdf8;
decoration-sky-500 text-decoration-color: #0ea5e9;
decoration-sky-600 text-decoration-color: #0284c7;
decoration-sky-700 text-decoration-color: #0369a1;
decoration-sky-800 text-decoration-color: #075985;
decoration-sky-900 text-decoration-color: #0c4a6e;
decoration-sky-950 text-decoration-color: #082f49;
decoration-blue-50 text-decoration-color: #eff6ff;
decoration-blue-100 text-decoration-color: #dbeafe;
decoration-blue-200 text-decoration-color: #bfdbfe;
decoration-blue-300 text-decoration-color: #93c5fd;
decoration-blue-400 text-decoration-color: #60a5fa;
decoration-blue-500 text-decoration-color: #3b82f6;
decoration-blue-600 text-decoration-color: #2563eb;
decoration-blue-700 text-decoration-color: #1d4ed8;
decoration-blue-800 text-decoration-color: #1e40af;
decoration-blue-900 text-decoration-color: #1e3a8a;
decoration-blue-950 text-decoration-color: #172554;
decoration-indigo-50 text-decoration-color: #eef2ff;
decoration-indigo-100 text-decoration-color: #e0e7ff;
decoration-indigo-200 text-decoration-color: #c7d2fe;
decoration-indigo-300 text-decoration-color: #a5b4fc;
decoration-indigo-400 text-decoration-color: #818cf8;
decoration-indigo-500 text-decoration-color: #6366f1;
decoration-indigo-600 text-decoration-color: #4f46e5;
decoration-indigo-700 text-decoration-color: #4338ca;
decoration-indigo-800 text-decoration-color: #3730a3;
decoration-indigo-900 text-decoration-color: #312e81;
decoration-indigo-950 text-decoration-color: #1e1b4b;
decoration-violet-50 text-decoration-color: #f5f3ff;
decoration-violet-100 text-decoration-color: #ede9fe;
decoration-violet-200 text-decoration-color: #ddd6fe;
decoration-violet-300 text-decoration-color: #c4b5fd;
decoration-violet-400 text-decoration-color: #a78bfa;
decoration-violet-500 text-decoration-color: #8b5cf6;
decoration-violet-600 text-decoration-color: #7c3aed;
decoration-violet-700 text-decoration-color: #6d28d9;
decoration-violet-800 text-decoration-color: #5b21b6;
decoration-violet-900 text-decoration-color: #4c1d95;
decoration-violet-950 text-decoration-color: #2e1065;
decoration-purple-50 text-decoration-color: #faf5ff;
decoration-purple-100 text-decoration-color: #f3e8ff;
decoration-purple-200 text-decoration-color: #e9d5ff;
decoration-purple-300 text-decoration-color: #d8b4fe;
decoration-purple-400 text-decoration-color: #c084fc;
decoration-purple-500 text-decoration-color: #a855f7;
decoration-purple-600 text-decoration-color: #9333ea;
decoration-purple-700 text-decoration-color: #7e22ce;
decoration-purple-800 text-decoration-color: #6b21a8;
decoration-purple-900 text-decoration-color: #581c87;
decoration-purple-950 text-decoration-color: #3b0764;
decoration-fuchsia-50 text-decoration-color: #fdf4ff;
decoration-fuchsia-100 text-decoration-color: #fae8ff;
decoration-fuchsia-200 text-decoration-color: #f5d0fe;
decoration-fuchsia-300 text-decoration-color: #f0abfc;
decoration-fuchsia-400 text-decoration-color: #e879f9;
decoration-fuchsia-500 text-decoration-color: #d946ef;
decoration-fuchsia-600 text-decoration-color: #c026d3;
decoration-fuchsia-700 text-decoration-color: #a21caf;
decoration-fuchsia-800 text-decoration-color: #86198f;
decoration-fuchsia-900 text-decoration-color: #701a75;
decoration-fuchsia-950 text-decoration-color: #4a044e;
decoration-pink-50 text-decoration-color: #fdf2f8;
decoration-pink-100 text-decoration-color: #fce7f3;
decoration-pink-200 text-decoration-color: #fbcfe8;
decoration-pink-300 text-decoration-color: #f9a8d4;
decoration-pink-400 text-decoration-color: #f472b6;
decoration-pink-500 text-decoration-color: #ec4899;
decoration-pink-600 text-decoration-color: #db2777;
decoration-pink-700 text-decoration-color: #be185d;
decoration-pink-800 text-decoration-color: #9d174d;
decoration-pink-900 text-decoration-color: #831843;
decoration-pink-950 text-decoration-color: #500724;
decoration-rose-50 text-decoration-color: #fff1f2;
decoration-rose-100 text-decoration-color: #ffe4e6;
decoration-rose-200 text-decoration-color: #fecdd3;
decoration-rose-300 text-decoration-color: #fda4af;
decoration-rose-400 text-decoration-color: #fb7185;
decoration-rose-500 text-decoration-color: #f43f5e;
decoration-rose-600 text-decoration-color: #e11d48;
decoration-rose-700 text-decoration-color: #be123c;
decoration-rose-800 text-decoration-color: #9f1239;
decoration-rose-900 text-decoration-color: #881337;
decoration-rose-950 text-decoration-color: #4c0519;

Functionality of Tailwind CSS Text Decoration Color Classes

  • decoration-inherit: This class inherits the text decoration color.
  • decoration-current: It sets the text decoration color to the current color.
  • decoration-transparent: It sets the text decoration color to transparent.
  • decoration-black: It sets the text decoration color to black.
  • decoration-white: It sets the text decoration color to white.
  • decoration-slate-*: It sets the text decoration color to various shades of slate.
  • decoration-gray-*: It sets the text decoration color to various shades of gray.
  • decoration-zinc-*: It sets the text decoration color to various shades of zinc.
  • decoration-neutral-*: It sets the text decoration color to various neutral shades.
  • decoration-stone-*: It ses the text decoration color to various shades of stone.
  • decoration-red-*: It sets the underline or decoration color to red.
  • decoration-orange-*: It sets the underline or decoration color to orange.
  • decoration-amber-*: It set the underline or decoration color to amber.
  • decoration-yellow-*: It sets the underline or decoration color to yellow.
  • decoration-lime-*: It sets the underline or decoration color to lime.
  • decoration-green-*: It sets the underline or decoration color to green.
  • decoration-emerald-*: It sets the underline or decoration color to emerald.
  • decoration-teal-*: It sets the underline or decoration color to teal.
  • decoration-cyan-*: It sets the underline or decoration color to cyan.
  • decoration-sky-*: It sets the underline or decoration color to sky blue.
  • decoration-blue-*: It set the underline or decoration color to blue.
  • decoration-indigo-*: It sets the underline or decoration color to indigo.
  • decoration-violet-*: It sets the underline or decoration color to violet.
  • decoration-purple-*: It sets the underline or decoration color to purple.
  • decoration-fuchsia-*: It sets the underline or decoration color to fuchsia.
  • decoration-pink-*: It sets the underline or decoration color to pink.
  • decoration-rose-*: It sets the underline or decoration color to rose.

Note: The * can be replaced by any valid number from 50 to the 950 value mentioned in the table.

Tailwind CSS Text Decoration Color Class Examples

Below is a list of Tailwind CSS Text Decoration Color classes that include properties for customizing the color of decorative elements like underlines, overlines, and strike-throughs on text .

Setting Text Decoration Color

Tailwind CSS's decoration-* utility classes allow for easy customization of text decorations like underlines by applying different colors. Each class combines a color identifier ('red', 'blue', etc.) with a numeric value ('300', '400', '500') indicating the shade intensity from lightest to darkest.

This example shows how these classes improve the appearance of links and text elements within paragraphs.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Decoration Color
    </h2>
    <p class="text-xl font-semibold mb-4 underline">
        Applying different Text Decoration Color classes
    </p> 
    <div>
        <p>
            The sky, <a class="underline decoration-violet-500"> 
            a dynamic canvas,</a> shifts from 
            <a class="underline decoration-red-500">dark mystery 
            to vibrant hues</a>. Rainbows, born from sunlight and
            raindrops, <a class="underline decoration-yellow-700">
            grace the sky in semicircular arcs</a>red,
            orange, yellow, green, blue, indigo, and violet.
        </p>
    </div>
</body>

</html>

Changing the Opacity

The example shows the use of Tailwind CSS utility classes to apply text decoration colors and opacity settings to paragraph elements, specifying colors like violet, red, and yellow and adjusting the opacity level of these elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Decoration Color
    </h2>
    <p class="text-xl font-semibold mb-4 underline">
        Applying different Color classes and Opacity
    </p> 
    <div>
        <p>
            The sky, <a class="underline decoration-violet-500/70"> 
            a dynamic canvas,</a> shifts from 
            <a class="underline decoration-red-500/70">dark mystery 
            to vibrant hues</a>. Rainbows, born from sunlight and
            raindrops, <a class="underline decoration-yellow-700/70">
            grace the sky in semicircular arcs</a>red,
            orange, yellow, green, blue, indigo, and violet.
        </p>
    </div>
</body>

</html>

Text Decoration on Hover

The example shows how Tailwind CSS text decoration classes can be applied to paragraph elements, allowing users to view different text decoration colors by hovering over the bold text.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
       Tailwind CSS Text Decoration Color 
    </h2>
    <p class="font-semibold mb-4 underline">
        Hover over the bold text to see 
        different text decoration colors. 
    </p> 
    <div>
        <p>
            The sky, <a class="hover:underline decoration-violet-500">
            <strong>a dynamic canvas,</strong></a> shifts from 
            <a class="hover:underline decoration-red-500"><strong>
            dark mystery to vibrant hues</strong></a>. Rainbows, 
            born from sunlight and raindrops, 
            <a class="hover:underline decoration-indigo-500">
            <strong>grace the sky in semicircular arcs</strong>
            </a>red,orange, yellow, green, blue, indigo, and violet.
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements