tailwind-mq
v0.3.0
Published
Tailwind plugin for various media query variants
Downloads
18
Maintainers
Readme
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
Add it to the plugins array of your Tailwind config. Call the functions for the utilities you want to use.
const { mediaQueries } = require('tailwind-mq');
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
andcontrast-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.