Tailwind: combine 2 styles for text-decoration-line-CodePudding

I want to a certain span of text to have both strike-throughs and underlines. This is possible in vanilla CSS like:

text-decoration-line: underline line-through;

I assumed with tailwind it would work similarly if I used the class like

but it does not work. Only one of the styles apply at a time. Is there any way to get that behaviour with tailwind classes?

CodePudding user response：

Right now those utilities are not composable, you can either create your own plugin, or use arbitrary properties to achieve the result you want:

<div >hello</div>

Here is a quick playground link with the solution: https://play.tailwindcss.com/baW2CzoBur

CodePudding user response：

Yes, you can use the text-decoration utility in Tailwind CSS to apply both strike-through and underline styles to a span of text.

To do this, you can use the following class:

.text-decoration-underline-line-through {
  text-decoration: underline line-through;
}

Then, you can apply this class to your span element like so:

<span >This text has both strike-throughs and underlines</span>

Alternatively, you can also use the text-decoration-line utility with the underline and line-through values to achieve the same result:

.text-decoration-line-underline-line-through {
  text-decoration-line: underline line-through;
}

<span >This text has both strike-throughs and underlines</span>