Tailwind CSS Text Decoration Style
The text-decoration-style property in Tailwind CSS helps to define the style of the text decoration such as underline or line-through.
Syntax
Here's the syntax for using the text-decoration-style property in Tailwind CSS:
<span class="text-<decoration>-<style>">...</span>
Example
Let's see an example of using the text-decoration-style property in Tailwind CSS:
<span class="text-underline-dotted">Hello, world!</span>
Output
The above example will render the text "Hello, world!" with an underline that has dotted style.
Explanation
The text-decoration-style property is used to define the style of the text decoration. The <decoration> part of the class name can be one of the following values:
underlineto set an underlineline-throughto set a line through the textno-underlineto remove the text decoration
The <style> part of the class name can be one of the following values:
solidto set a solid line styledashedto set a dashed line styledottedto set a dotted line styledoubleto set a double-line stylewavyto set a wavy line stylenoneto remove the text decoration style
Use
You can use the text-decoration-style property to add or remove the style of the text decoration in your web pages. You can use it to add visual emphasis to your text elements or to indicate changes or updates.
Important Points
- The
text-decoration-styleproperty only defines the style of the text decoration and not the position or color. - You can combine the
text-decoration-styleproperty with other Tailwind CSS classes such astext-red-500to define the color of the text decoration.
Summary
The text-decoration-style property in Tailwind CSS is used to define the style of the text decoration such as underline or line-through. You can use it to add visual emphasis to your text elements or to indicate changes or updates. The <decoration> part of the class name can be underline, line-through, or no-underline, while the <style> part can be solid, dashed, dotted, double, wavy, or none.