javascript - 如何自定义颜色tailwind css上的直通文本装饰

Question

我想自定义宽度线“line-through”变得更粗，如 4-6px。我在tailwind.config.js 上自定义了粗线“line-through”，但它不起作用，也许你可以就我的问题给我建议。

//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>

Answer 1

正确的 css 属性是 text-decoration-thickness所以你的插件应该是:

function ({addUtilities}) {
  const extendLineThrough = {
      '.line-through': {
          'textDecoration': 'line-through',
          'text-decoration-color': 'red',
          'text-decoration-thickness': '4px'
      },
  }
  addUtilities(extendLineThrough)
}

Here是 Tailwind Play 上的工作版本。