2
TailwindCSS 如何控制打印效果？
source link: https://www.ixiqin.com/2021/11/tailwindcss-how-to-control-the-printing-effect/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
TailwindCSS 如何控制打印效果？
在我们实际开发的时候，我们可能会希望打印展示的效果和浏览器看到的效果不同。这个时候我们如何实现控制？你可以借助于 tailwind 的自定义 screen 类的方式来实现。
配置 tailwind.config.js
在 tailwind 中添加 theme 配置，设定一个拓展的screen 为print。
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend:{
screens:{
'print': {'raw': 'print'},
}
}
},
variants: {
extend: {},
},
plugins: [],
}
使用 print:invisible 控制显示
配置了 screen 以后，你就可以在编写样式的时候，使用 print:classname的方式，来控制在打印状态下展示的内容。
发布日期：2021年11月7日
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK