TailwindCSS:有可能在打印时删除方框阴影吗

Question

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

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

Answer 1

是的，顺风有一个修饰符print，你可以看看这里的

例如，打印时阴影将消失

<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