# TailwindCSS 如何控制打印效果？

- Link: https://www.ixiqin.com/2021/11/07/tailwindcss-how-to-control-the-printing-effect/
- Published: 2021-11-07T13:57:24+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2021/11/07/tailwindcss-how-to-control-the-printing-effect/#)

 * [配置 tailwind.config.js](https://www.ixiqin.com/2021/11/07/tailwindcss-how-to-control-the-printing-effect/#%e9%85%8d%e7%bd%ae_tailwindconfigjs)
 * [使用 print:invisible 控制显示](https://www.ixiqin.com/2021/11/07/tailwindcss-how-to-control-the-printing-effect/#%e4%bd%bf%e7%94%a8_print_invisible_%e6%8e%a7%e5%88%b6%e6%98%be%e7%a4%ba)

在我们实际开发的时候，我们可能会希望打印展示的效果和浏览器看到的效果不同。这个时候
我们如何实现控制？你可以借助于 tailwind 的自定义 screen 类的方式来实现。

## 配置 tailwind.config.js

在 tailwind 中添加 theme 配置，设定一个拓展的screen 为print。

    ```javascript
    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`的方式，来控制
在打印状态下展示的内容。