在我们实际开发的时候，我们可能会希望打印展示的效果和浏览器看到的效果不同。这个时候我们如何实现控制？你可以借助于 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: [],
}

Code language: JavaScript (javascript)

使用 print:invisible 控制显示

配置了 screen 以后，你就可以在编写样式的时候，使用 print:classname的方式，来控制在打印状态下展示的内容。