TailwindCSS：是否可以在打印时删除框阴影？

Question

我有一个 div 和一个类看起来像这样 className={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}

现在我正在设置页面的打印版本，我想知道是否可以使用 TailwindCSS 工具集以某种方式删除打印版本的阴影因素/框阴影？

Answer 1

是的，Tailwind 有一个修饰符 print，你可以看看 here

例如-打印时阴影会消失

<div class="shadow-lg print:shadow-none">
  Hello World
</div>

Answer 2

为了使其正常工作，我必须将以下内容添加到配置中：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

将此添加到配置后，任何 print: 语句现在都可以使用，包括 print:shadow-none

TailwindCSS：是否可以在打印时删除框阴影？

TailwindCSS: is it possible to remove a box-shadow on print?

css

reactjs

tailwind-css

styling