tailwind-mq weekly downloads statistics

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:

When using CSS config

Add an import for the plugin in your CSS file.

When using JS config

Add it to the plugins array of your Tailwind config.

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.