TailwindCSS Media Query Plugin

This plugin generates variants for various media queries not covered by TailwindCSS out of the box.

Installation

Add to your project via:

# Install using npm
npm install -D tailwind-mq

# Install using yarn
yarn add -D tailwind-mq

When using CSS config

Add an import for the plugin in your CSS file.

@import "tailwind-mq";

When using JS config

Add it to the plugins array of your Tailwind config.

import { mediaQueries } from 'tailwind-mq';
// const { mediaQueries } = require('tailwind-mq'); // for CommonJS

plugins: [
	mediaQueries(), // no options to configure
]

Features

If you want a media query to be added to this plugin please open an issue or PR.

prefers-contrast

• contrast-custom: A variant for @media (prefers-contrast: custom).

• contrast-more and contrast-less variants already exist in TailwindCSS itself.

prefers-reduced-transparency

• transparency-reduce: A variant for @media (prefers-reduced-transparency: reduce).
• transparency-safe: A variant for @media (prefers-reduced-transparency: no-preference).

These are the "wrong" way round to match the existing motion variants inside of TailwindCSS.

prefers-reduced-data

• data-reduce: A variant for @media (prefers-reduced-data: reduce).

inverted-colors

• inverted-colors: A variant for @media (inverted-colors: inverted).

scripting

• noscript: A variant for @media (scripting: none).
• scripting: A variant for @media (scripting: enabled).
• scripting-initial: A variant for @media (scripting: initial-only).

update

• update-none: A variant for @media (update: none).
• update-slow: A variant for @media (update: slow).
• update-fast: A variant for @media (update: fast).

overflow-block

• overflow-block-none: A variant for @media (overflow-block: none).
• overflow-block-scroll: A variant for @media (overflow-block: scroll).
• overflow-block-optional-paged: A variant for @media (overflow-block: optional-paged).
• overflow-block-paged: A variant for @media (overflow-block: paged).

overflow-inline

• overflow-inline-none: A variant for @media (overflow-inline: none).
• overflow-inline-scroll: A variant for @media (overflow-inline: scroll).

dynamic-range

• sdr: A variant for @media (dynamic-range: standard).
• hdr: A variant for @media (dynamic-range: high).

color-gamut

• srgb: A variant for @media (color-gamut: srgb).
• p3: A variant for @media (color-gamut: p3).
• rec2020: A variant for @media (color-gamut: rec2020).

Removed Features

forced-colors

• This was removed as it is now in TailwindCSS 3.4+.

License

This project is licensed under the MIT License.