如何在Tailwind CSS中同时实现文本下划线与删除线样式？

直接用underline和line-through两个类之所以只能生效一个，是因为这两个类都是设置text-decoration-line属性，后加载的类会覆盖前者的属性值，所以没法同时生效。

你可以用以下几种方法实现需求：

• 自定义Tailwind工具类
  在项目的tailwind.config.js中扩展主题，添加一个自定义的文本装饰类：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{html,js}"], // 根据你的项目实际路径调整
    theme: {
      extend: {
        textDecoration: {
          'underline-through': 'underline line-through',
        },
      },
    },
    plugins: [],
  }
  

  之后就可以像使用原生Tailwind类一样调用：

  <p class="underline-through">这段文本同时拥有下划线和删除线</p>
  

• 使用内联样式
  直接在元素上写原生CSS样式，快速实现效果：

  <p style="text-decoration-line: underline line-through;">这段文本同时拥有下划线和删除线</p>
  

• 自定义CSS类
  在全局CSS文件中定义一个类，直接设置所需属性：

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

  然后在元素上添加这个类即可。

内容的提问来源于stack exchange，提问作者lanxion