Create custom print classes with Tailwind

Configure tailwind.config.js to create prefixed classes with a custom media query.

custom media query tailwind

If you need to a @media print (print stylesheet) for your website and you use Tailwind you can customize the tailwind.config.js to include custom media queries.

Use Print stylesheets for printers and PDFs

The appearance of a website often differs when printed or saved as a PDF. For that reason it is useful to define CSS styles that only apply to printers or PDFs (or devices that satisfy the @media print media query).

Tailwind config extend media queries

Extend the standard tailwind config in a tailwind.config.js file itesting-email-with-cypressn your project root.

module.exports = {
    theme: {
        extend: {
            screens: {
                'print': { 'raw': 'print' },
            }
        }
    },
}

This means we can use classes such as print:mb-4 to apply a margin to an element only for print styles.

Using custom classes

Here is an example using React. Notice the class names that have a print: prefix.

import React from "react";

const FeatureCard: React.FC<{
  name: string;
  icon?: any;
  text?: string;
  iconClass?: string;
}> = (props) => {
  return (
    <div key={props.name} className={props.icon ? "pt-6" : ""}>
      <div className="flow-root print:bg-red-100 bg-gray-50 rounded-lg px-6 pb-8 print:p-0">
        <div className={props.icon ? "-mt-6" : ""}>
          <div className={"print:hidden"}>
            {props.icon ? (
              <span
                className={
                  "inline-flex items-center justify-center p-3 rounded-md shadow-lg  " +
                  (props.iconClass ?? "")
                }
              >
                <props.icon
                  className="h-6 w-6 text-white transform hover:scale-110 transition duration-100"
                  aria-hidden="true"
                />
              </span>
            ) : undefined}
          </div>
          <h3 className={"text-lg font-medium text-gray-900 mt-8 font-sans"}>
            {props.name}
          </h3>
          {props.text ? (
            <p className="mt-3 text-sm text-gray-500">{props.text}</p>
          ) : undefined}
        </div>
      </div>
    </div>
  );
};
export default FeatureCard;

Results

This is an example of how flexible Tailwind CSS can be. It lets you configure print styles using custom media queries so that you can use all the standard tailwind classes with a print: prefix to apply the rule's styles only when a print media query is satisfied.

In the screenshot below we can see a website with a print dialog above it showing the print and screen styles together. Notice the difference that was achieved using the tailwind css print media queries:

tailwind print stylesheets

Related content

Javascript email libraries for MailSlurp

Nodemailer alternatives to send and receieve email in code and tests

Fastest way to start a typescript project

Modern typescript tooling has come a long way. See how to setup a new project with TS-Node, TSC, and typeconfig.json.

Fetch error message javascript

Handle response exceptions with Fetch in Javascript

GraphQL API disposable email accounts

How to create real email addresses using GraphQL to send and receive emails in tests and frontend applications.

GraphQL Email API Tutorial

Did you know you can send and receive emails using GraphQL?

Hugo responsive image srcsets

Serve responsive picture tags with custom render-image layout partial in Hugo static site generator.

Ready to dive in?Start building email applications today.