The Preflight feature in Tailwind will remove all of the browser’s default stylings for most components, providing you a fresh start to work with when it comes to cross-browser design consistency.
You can design a beautiful hyperlink using text-decoration. Tailwind provides many utilities for controlling the color of text decorations.
For example:
| Class | 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; |
Read more: Create credit card designs in Tailwind CSS.
Table of Contents
Setting the text-decoration color of hyperlinks
Use the decoration-{color} utilities to change the color of an element’s text-decoration.
For example:
<p>Lorem <a class="underline decoration-pink-500">ipsum</a> dolor sit amet <a class="underline decoration-sky-500">consectetur</a> adipisicing elit. <a class="underline decoration-indigo-500">Minus</a>, soluta.</p>
This example will produce the following output.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, soluta.
If you are using React then write then replace the class attribute with className.
className="underline decoration-pink-500"
Changing the opacity of colorful underline
Add the percentage of the intensity of color to control the opacity of an element’s text-decoration color.
For example, we will add a 30% of pink color with an intensity of 500:
<p>Lorem <a class="underline decoration-pink-500/30">ipsum</a>
Lorem ipsum
Hover, focus, and other states
This is also available for Hover, focus, and other states as well. Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:decoration-blue-400 to only apply the decoration-blue-400 utility on hover.
<p class="underline decoration-sky-600 hover:decoration-blue-400">
<!-- your text with hyperlinks -->
</p>
Media queries and breakpoints
Variable modifiers can also be used to target media queries such as responsive breakpoints, dark mode, prefers-reduced-motion, and others. Use md:decoration-blue-400 to apply the decoration-blue-400 utility exclusively to medium and larger screen sizes.
<p class="underline decoration-sky-600 md:decoration-blue-400">
<!-- your text with hyperlinks -->
</p>
