March 27, 2024

Ignore Dark Mode During Print Using Tailwind CSS

Justin Golden

The Problem

Your website uses Tailwind CSS and has a light and dark mode. The user can print the page, but if they’re in dark mode, they get a mess. How can you configure Tailwind so it automatically uses light mode when they print?

The Solution

1. In your tailwind.config.cjs, set darkMode to null:

darkMode: null

2. In your tailwind.config.cjs, under plugins, addVariant for dark to use @media not print:

plugins: [
	plugin(function ({ addUtilities, addVariant }) {
		addVariant('dark', '@media not print { .dark & }');
	})
];

That’s it! Hope this short article helped you. Feel free to check out our other articles!