RGB logo

RGB Studios.org

A web development company

March 27, 2024

Ignore Dark Mode During Print Using Tailwind CSS

Justin Golden

Photo credit @alrivarola on Unsplash

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

  1. 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!

More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email