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

user_11816224 0
Viewed 311

I have a div with a classes that look like this className={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}

Right now I'm setting up a print version of the page and I was wondering if it is possible to somehow remove this shadow-factors / box-shadow for the printed version with TailwindCSS toolset?

tailwind-css reactjs styling css
2 Answers

Yes Tailwind has a modifier print, you may look here

For example - shadow will disappear when printing

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

In order to make it work I had to add the following to the config:

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

With this being added to config any print: statements are working now, including print:shadow-none

user_118162240
Related