{"id":15380986,"url":"https://github.com/lukewarlow/tailwind-mq","last_synced_at":"2025-06-20T23:08:51.088Z","repository":{"id":179040082,"uuid":"662767034","full_name":"lukewarlow/tailwind-mq","owner":"lukewarlow","description":"Tailwind v3+ plugin that adds various missing media query variants.","archived":false,"fork":false,"pushed_at":"2025-01-23T15:58:03.000Z","size":125,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-20T23:08:04.464Z","etag":null,"topics":["color-gamut","css","dynamic-range","forced-colors","hacktoberfest","inverted-colors","media-queries","mediaqueries","overflow-block","overflow-inline","prefers-contrast","prefers-reduced-data","prefers-reduced-transparency","scripting","tailwind","tailwind-variants","tailwindcss","tailwindcss-plugin","update"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwind-mq","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukewarlow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-05T21:04:27.000Z","updated_at":"2025-01-23T15:58:02.000Z","dependencies_parsed_at":"2024-10-17T21:35:43.485Z","dependency_job_id":"8df27c5b-27da-4fc1-bf4e-21cc7b8243e6","html_url":"https://github.com/lukewarlow/tailwind-mq","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.1428571428571429,"last_synced_commit":"f19943c56bd14371b293388cf61566bcc4e36533"},"previous_names":["lukewarlow/tailwind-mq"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/lukewarlow/tailwind-mq","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-mq","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-mq/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-mq/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-mq/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukewarlow","download_url":"https://codeload.github.com/lukewarlow/tailwind-mq/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-mq/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261032097,"owners_count":23100050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-gamut","css","dynamic-range","forced-colors","hacktoberfest","inverted-colors","media-queries","mediaqueries","overflow-block","overflow-inline","prefers-contrast","prefers-reduced-data","prefers-reduced-transparency","scripting","tailwind","tailwind-variants","tailwindcss","tailwindcss-plugin","update"],"created_at":"2024-10-01T14:25:15.832Z","updated_at":"2025-06-20T23:08:46.079Z","avatar_url":"https://github.com/lukewarlow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TailwindCSS Media Query Plugin\n\n[![npm](https://img.shields.io/npm/v/tailwind-mq.svg?style=flat-square)](https://www.npmjs.com/package/tailwind-mq)\n\nThis plugin generates variants for various media queries not covered by TailwindCSS out of the box.\n\n## Installation\n\nAdd to your project via:\n\n```bash\n# Install using npm\nnpm install -D tailwind-mq\n\n# Install using yarn\nyarn add -D tailwind-mq\n```\n\n### When using CSS config\n\nAdd an import for the plugin in your CSS file.\n\n```css\n@import \"tailwind-mq\";\n```\n\n### When using JS config\n\nAdd it to the plugins array of your Tailwind config.\n\n```js\nimport { mediaQueries } from 'tailwind-mq';\n// const { mediaQueries } = require('tailwind-mq'); // for CommonJS\n\nplugins: [\n\tmediaQueries(), // no options to configure\n]\n```\n\n## Features\n\nIf you want a media query to be added to this plugin please open an issue or PR.\n\n### [`prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)\n\n- `contrast-custom`: A variant for `@media (prefers-contrast: custom)`.\n\n- `contrast-more` and `contrast-less` variants already exist in TailwindCSS itself.\n\n### [`prefers-reduced-transparency`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency)\n\n- `transparency-reduce`: A variant for `@media (prefers-reduced-transparency: reduce)`.\n- `transparency-safe`: A variant for `@media (prefers-reduced-transparency: no-preference)`.\n\nThese are the \"wrong\" way round to match the existing motion variants inside of TailwindCSS.\n\n### [`prefers-reduced-data`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data)\n\n- `data-reduce`: A variant for `@media (prefers-reduced-data: reduce)`.\n\n### [`inverted-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)\n\n- `inverted-colors`: A variant for `@media (inverted-colors: inverted)`.\n\n### [`scripting`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting)\n\n- `noscript`: A variant for `@media (scripting: none)`.\n- `scripting`: A variant for `@media (scripting: enabled)`.\n- `scripting-initial`: A variant for `@media (scripting: initial-only)`.\n\n### [`update`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/update)\n\n- `update-none`: A variant for `@media (update: none)`.\n- `update-slow`: A variant for `@media (update: slow)`.\n- `update-fast`: A variant for `@media (update: fast)`.\n\n### [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-block)\n\n- `overflow-block-none`: A variant for `@media (overflow-block: none)`.\n- `overflow-block-scroll`: A variant for `@media (overflow-block: scroll)`.\n- `overflow-block-optional-paged`: A variant for `@media (overflow-block: optional-paged)`.\n- `overflow-block-paged`: A variant for `@media (overflow-block: paged)`.\n\n### [`overflow-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-inline)\n\n- `overflow-inline-none`: A variant for `@media (overflow-inline: none)`.\n- `overflow-inline-scroll`: A variant for `@media (overflow-inline: scroll)`.\n\n### [`dynamic-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range)\n\n- `sdr`: A variant for `@media (dynamic-range: standard)`.\n- `hdr`: A variant for `@media (dynamic-range: high)`.\n\n### [`color-gamut`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut)\n\n- `srgb`: A variant for `@media (color-gamut: srgb)`.\n- `p3`: A variant for `@media (color-gamut: p3)`.\n- `rec2020`: A variant for `@media (color-gamut: rec2020)`.\n\n## Removed Features\n\n### [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)\n\n- This was removed as it is now in TailwindCSS 3.4+.\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/lukewarlow/tailwind-mq/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukewarlow%2Ftailwind-mq","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukewarlow%2Ftailwind-mq","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukewarlow%2Ftailwind-mq/lists"}