Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to customize color The line-through text decoration on tailwind css

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>
like image 977
Anjasmara Dwi.S Avatar asked Apr 21 '21 02:04

Anjasmara Dwi.S


People also ask

How do I add custom text color in tailwind?

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.

How do I change the color of a line in CSS?

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.

How do you underline in Tailwind CSS?

​ 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.

How to change the color of the underline with tailwind CSS V3?

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.

What does the underline class in tailwind do?

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).

How do I extend the color palette in tailwind?

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', } } } }

How do I change the color of the text in CSS2?

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.


Video Answer


1 Answers

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.

like image 95
JHeth Avatar answered Nov 15 '22 01:11

JHeth