{"id":15875576,"url":"https://github.com/skttl/tailwindcss-quantity-queries","last_synced_at":"2026-01-22T09:35:22.000Z","repository":{"id":257811899,"uuid":"864074046","full_name":"skttl/tailwindcss-quantity-queries","owner":"skttl","description":"Variants for using quantity queries with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2024-09-27T13:02:57.000Z","size":16,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T20:33:24.740Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/skttl.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}},"created_at":"2024-09-27T12:51:40.000Z","updated_at":"2025-01-12T21:52:33.000Z","dependencies_parsed_at":"2024-10-06T02:04:45.453Z","dependency_job_id":"f7996933-ad88-4084-b830-c6f67db4a687","html_url":"https://github.com/skttl/tailwindcss-quantity-queries","commit_stats":null,"previous_names":["skttl/tailwindcss-quantity-queries"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/skttl/tailwindcss-quantity-queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skttl%2Ftailwindcss-quantity-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skttl%2Ftailwindcss-quantity-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skttl%2Ftailwindcss-quantity-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skttl%2Ftailwindcss-quantity-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skttl","download_url":"https://codeload.github.com/skttl/tailwindcss-quantity-queries/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skttl%2Ftailwindcss-quantity-queries/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279397853,"owners_count":26162758,"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","status":"online","status_checked_at":"2025-10-17T02:00:07.504Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-06T02:00:38.571Z","updated_at":"2025-10-17T18:30:59.808Z","avatar_url":"https://github.com/skttl.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# tailwindcss-quantity-queries\n\n\u003e Variants for using quantity queries with Tailwind CSS\n\n## What on earth is a quantity query?\nQuantity Queries are a powerful concept in CSS that enable developers to apply styles based on the number of child elements within a parent element. Unlike traditional media queries, which react to viewport size or other environmental conditions, quantity queries focus on the content structure, allowing for more context-aware styling.\n\nWith quantity queries, you can create dynamic layouts that adapt to the number of child elements. For example, you might want to change the background color of a container based on whether it has fewer than three children or more than five. This approach is particularly useful for responsive design, as it allows developers to build more flexible and maintainable UI components that react not just to screen size, but also to the content they contain.\n\n### Related links\n\n- [Quantity Queries for CSS](https://alistapart.com/article/quantity-queries-for-css/) by [Heydon Pickering](https://heydonworks.com/)\n- [Quantity Queries Builder](https://quantityqueries.com/) by [Drew Minns](https://drewminns.com/)\n\n## Getting Started\n\n### Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D tailwindcss-quantity-queries\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-quantity-queries'),\n    // ...\n  ],\n};\n```\n\n### Usage\n\nYou can now use the plugin's variants in your HTML classes. The plugin supports the following syntax for selecting elements based on their child count:\n\n- Less Than: `children-[\u003c3]` — Applies styles if the parent has less than 3 children.\n- Greater Than: `children-[\u003e5]` — Applies styles if the parent has more than 5 children.\n- Exact Count: `children-[3]` — Applies styles if the parent has exactly 3 children.\n- Range: `children-[2-5]` — Applies styles if the parent has between 2 and 5 children.\n\n**Example:**\n\n```html\n\u003cdiv class=\"children-[\u003c3]:bg-red-500 children-[\u003e5]:bg-blue-500 children-[2-5]:bg-green-500\"\u003e\n  \u003cdiv\u003eChild 1\u003c/div\u003e\n  \u003cdiv\u003eChild 2\u003c/div\u003e\n  \u003cdiv\u003eChild 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Group Variants\nThe plugin also supports group variants, allowing you to apply styles based on the count of child elements in a group. Use the following syntax:\n\n- Group Less Than: `group-children-[\u003c3]`\n- Group Greater Than: `group-children-[\u003e5]`\n- Group Range: `group-children-[2-5]`\n\n**Example:**\n\n```html\n\u003cdiv class=\"group\"\u003e\n  \u003cdiv class=\"group-children-[\u003c3]:bg-red-500\"\u003eChild 1\u003c/div\u003e\n  \u003cdiv class=\"group-children-[\u003e5]:bg-blue-500\"\u003eChild 2\u003c/div\u003e\n  \u003cdiv class=\"group-children-[2-5]:bg-green-500\"\u003eChild 3\u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskttl%2Ftailwindcss-quantity-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskttl%2Ftailwindcss-quantity-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskttl%2Ftailwindcss-quantity-queries/lists"}