How to Use a Print Modifier in Tailwind?

In Tailwind CSS, the print modifier enables users to apply styles only when printing a document. Users can use the print modifier for several reasons, such as changing the layout, colors, and visibility of the page when printing. Moreover, it permits users to hide an element when printing using the “print:hidden” class and make the element visible on the screen but hidden when printing.

This article will exemplify the method to use the print modifier in Tailwind.

How to Use a Print Modifier in Tailwind?

To use the print modifier in Tailwind, it is required to use the “print” class before the desired utility class for applying the style on the page when printing. Then, verify the output by viewing the web page.

Check out the given-provided steps for a practical demonstration:

Step 1: Utilize the Print Modifier in HTML Program

Make an HTML program and use the “print” modifier before the desired utility class to apply the style on the page when printing. For instance, we have used the “print:hidden” and “print:block” classes in our program:

Here:

• “print:hidden” class is used to hide the entire <div> and its contents when the page is printed.
• “hidden” class initially hides elements on screen.
• “print:block” class overrides the “hidden” class when the page is printed and makes the element visible in the print context.
• “print:text-teal-700” class sets the text color to teal for printing purposes.

Step 2: Verification

View the HTML web page to ensure that the print modifier is working properly:

In the above output, it can be observed that the “print” modifier is working successfully according to which it was styled.

Conclusion

The print modifier is a special keyword that is used to apply the style only when printing a document. It is used in the HTML program by adding the “print” class before the desired utility class. It applies the style on the page when printing. This article has exemplified the method to use the print modifier in Tailwind.