Create custom print classes with Tailwind
Configure tailwind.config.js to create prefixed classes with a custom media query.
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:
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.
NodeMailer NPM Tutorial
Send and receive email using NodeMailer in Node JS.
Create custom print classes with Tailwind
Configure tailwind.config.js to create prefixed classes with a custom media query.
Send and receive email in Cypress JS tests with MailSlurp
Test email sign-up. password verification and more with Cypress JS and MailSlurp.
Cypress Email Plugin - Test email accounts in Javascript (an...
Use real email accounts in CypressJS to test user sign-up, email verification, and more.
Test email accounts with Jest and Puppeteer
Test email accounts in React with Jest and Puppeteer. Send and receive emails in Javascript.
Test user sign-up with NodeJS and WebDriver
Test email related processes like sign-up and verification using WDIO WebDriver and MailSlurp.
TestCafe end-to-end MFA testing for user sign-up and email v...
End-to-end testing with MailSlurp, NodeJS, and TestCafe.
Base64 file uploads
How to encode files as Base 64 encoded strings in several languages
Deno Email Apis
Send and receive emails in Deno JS. Use APIs in Deno with MailSlurp.
Email read (opened seen settings)
How to control the seen or read settings for an email using MailSlurp.
GraphQL Email API
Fetch and read emails with GraphQL inboxes using MailSlurp email API.
Testing OTP password link username and password for 2 factor...
Testing OTP password link username and password for 2 factor authentication (2FA)
MailSlurp NodeMailer SMTP Usage
Use SMTP nodemailer with MailSlurp disposable email addresses
Testing email with Cypress test email accounts
Test email accounts for CypressJS. End-to-end testing with real email addresses using MailSlurp Cypress plugin.
Send emails in NodeJS using SMTP
How to use Javascript SMTP client (or Nodemailer) to send email with MailSlurp mail server
Testing Email with Cypress JS and MailSlurp
Email testing with Cypress JS