Tailwind Print Styles Custom Media Query
source link: https://www.mailslurp.com/blog/tailwind-print-styles-custom-media-query/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Tailwind Print Styles 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 in 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
In the image below you can see the print
media styling on the left (a red box) and screen
media query styling on the right (larger and grey background).
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.
Related
GraphQL API disposable email …
How to create real email addresses using GraphQL to send and receive emails in tests and frontend applications.
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.
GraphQL Email API Tutorial
Did you know you can send and receive emails using GraphQL?
Base64 file uploads
How to encode files as Base 64 encoded strings in several languages
CypressJS Email Test Plugin
Use real email accounts in CypressJS to test user sign-up, email verification, and more.
Deno Email Apis
Send and receive emails in Deno JS. Use APIs in Deno with MailSlurp.
Email read (opened seen …
How to control the seen or read settings for an email using MailSlurp.
Fetch error message javascript
Handle response exceptions with Fetch in Javascript
GraphQL Email API
Fetch and read emails with GraphQL inboxes using MailSlurp email API.
Email APIs for developer and QA teams
MailSlurp is the leading email-as-a-service API system. Create unlimited disposable email accounts then send and receive emails from code and tests.
Create free accountWhat is MailSlurp?
MailSlurp is a free email API service for developers, QA testers and marketing campaigns. You can create disposable test mail accounts using the random email address generator via HTTP, GraphQL, dashboard or official code clients in Javascript, Csharp, Golang, Python, Java, Ruby, PHP and more!
What can MailSlurp do?
MailSlurp offers permanent email addresses using custom domains or random fake emails ending in @mailslurp.com
. You can generate as many inboxes as you need for end-to-end email testing, email marketing campaigns and application development.
Getting started
Create a free MailSlurp account to get started using alternatives to MailTrap, Mailinator, Mailosaur and more. MailSlurp is the most advanced email platform with many features including: HTTP webhook push, graphql email APIs, sdks with long-polling (wait for emails), inbox forwarding, complex routing rulesets, and spam filters. See the pricing page for a full overview.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK