i want customize width line "line-through" become more thick like 4-6px. i have customize thick line "line-through" on tailwind.config.js but it not works, maybe you can give me suggest about my problem.
//setting tailwind.config.js in plugin:[]
function ({addUtilities}) {
const extendLineThrough = {
'.line-through': {
'textDecoration': 'line-through',
'text-decoration-color': 'red',
'text-decoration-width': '4px'
},
}
addUtilities(extendLineThrough)
}
<div class="hidden sm:block md:col-span-2 text-rigt">
<p class="md:pt-1 text-gray-500 line-through">
Rp. 8000
</p>
</div>
Hover. To control the text color of an element on hover, add the hover: prefix to any existing text color utility. For example, use hover:text-blue-600 to apply the text-blue-600 utility on hover.
The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links.
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:underline-offset-4 to only apply the underline-offset-4 utility on hover. For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Now with Tailwind CSS v3, you can change the color of the underline for underlined text. The classes for making this are all of the form decoration- {color}. Sidenote: they’re named this way because the underline class in Tailwind technically sets the CSS property text-decoration: underline.
Sidenote: they’re named this way because the underline class in Tailwind technically sets the CSS property text-decoration: underline. For example, Tailwind also has a line-through class, which sets text-decoration: line-through (crossing something out).
Extending the default palette As described in the theme documentation, if you'd like to extend the default color palette, you can do so using the theme.extend.colors section of your tailwind.config.js file: module.exports = { theme: { extend: { colors: { 'regal-blue': '#243c5a', } } } }
Only the first line will be decorated. There is another way of looking at the meaning of the CSS2 specification; and that is the outer text-decoration will set the color of the "line-through" and text, but an inner color declaration (in a 'span' tag) can be used to reset the text color.
The correct css property is text-decoration-thickness
so your plugin should be:
function ({addUtilities}) {
const extendLineThrough = {
'.line-through': {
'textDecoration': 'line-through',
'text-decoration-color': 'red',
'text-decoration-thickness': '4px'
},
}
addUtilities(extendLineThrough)
}
Here's a working version on Tailwind Play.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With