{"id":13805016,"url":"https://github.com/tailwindlabs/tailwindcss-container-queries","last_synced_at":"2025-05-13T18:05:46.679Z","repository":{"id":61713690,"uuid":"550184547","full_name":"tailwindlabs/tailwindcss-container-queries","owner":"tailwindlabs","description":"A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.","archived":false,"fork":false,"pushed_at":"2025-02-13T11:42:02.000Z","size":64,"stargazers_count":1396,"open_issues_count":3,"forks_count":44,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-05T03:37:13.203Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/tailwindlabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-10-12T10:39:32.000Z","updated_at":"2025-05-03T12:46:23.000Z","dependencies_parsed_at":"2024-04-09T20:49:19.180Z","dependency_job_id":"bf6c4be5-4bda-4e12-8467-e718c9057608","html_url":"https://github.com/tailwindlabs/tailwindcss-container-queries","commit_stats":{"total_commits":32,"total_committers":4,"mean_commits":8.0,"dds":0.09375,"last_synced_commit":"fc4417130271ef6213ae52789907fc247ce7b965"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-container-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-container-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-container-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-container-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tailwindlabs","download_url":"https://codeload.github.com/tailwindlabs/tailwindcss-container-queries/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000845,"owners_count":21997441,"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":[],"created_at":"2024-08-04T01:00:56.386Z","updated_at":"2025-05-13T18:05:46.656Z","avatar_url":"https://github.com/tailwindlabs.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":[],"readme":"\u003e [!NOTE]\n\u003e As of Tailwind CSS v4.0, container queries are supported in the framework by default and this plugin is no longer required.\n\n# @tailwindcss/container-queries\n\nA plugin for Tailwind CSS v3.2+ that provides utilities for container queries.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D @tailwindcss/container-queries\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@tailwindcss/container-queries'),\n    // ...\n  ],\n}\n```\n\n## Usage\n\nStart by marking an element as a container using the `@container` class, and then applying styles based on the size of that container using the container variants like `@md:`, `@lg:`, and `@xl:`:\n\n```html\n\u003cdiv class=\"@container\"\u003e\n  \u003cdiv class=\"@lg:underline\"\u003e\n    \u003c!-- This text will be underlined when the container is larger than `32rem` --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nBy default we provide [container sizes](#configuration) from `@xs` (`20rem`) to `@7xl` (`80rem`).\n\n### Named containers\n\nYou can optionally name containers using a `@container/{name}` class, and then include that name in the container variants using classes like `@lg/{name}:underline`:\n\n```html\n\u003cdiv class=\"@container/main\"\u003e\n  \u003c!-- ... --\u003e\n  \u003cdiv class=\"@lg/main:underline\"\u003e\n    \u003c!-- This text will be underlined when the \"main\" container is larger than `32rem` --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Arbitrary container sizes\n\nIn addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value:\n\n```html\n\u003cdiv class=\"@container\"\u003e\n  \u003cdiv class=\"@[17.5rem]:underline\"\u003e\n    \u003c!-- This text will be underlined when the container is larger than `17.5rem` --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Removing a container\n\nTo stop an element from acting as a container, use the `@container-normal` class.\n\n\u003cdiv class=\"@container xl:@container-normal\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n\n### With a prefix\n\nIf you have configured Tailwind to use a prefix, make sure to prefix both the `@container` class and any classes where you are using a container query modifier:\n\n```html\n\u003cdiv class=\"tw-@container\"\u003e\n  \u003c!-- ... --\u003e\n  \u003cdiv class=\"@lg:tw-underline\"\u003e\n    \u003c!-- ... --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Configuration\n\nBy default we ship with the following configured values:\n\n| Name   | CSS                                          |\n| ------ | -------------------------------------------- |\n| `@xs`  | `@container (min-width: 20rem /* 320px */)`  |\n| `@sm`  | `@container (min-width: 24rem /* 384px */)`  |\n| `@md`  | `@container (min-width: 28rem /* 448px */)`  |\n| `@lg`  | `@container (min-width: 32rem /* 512px */)`  |\n| `@xl`  | `@container (min-width: 36rem /* 576px */)`  |\n| `@2xl` | `@container (min-width: 42rem /* 672px */)`  |\n| `@3xl` | `@container (min-width: 48rem /* 768px */)`  |\n| `@4xl` | `@container (min-width: 56rem /* 896px */)`  |\n| `@5xl` | `@container (min-width: 64rem /* 1024px */)` |\n| `@6xl` | `@container (min-width: 72rem /* 1152px */)` |\n| `@7xl` | `@container (min-width: 80rem /* 1280px */)` |\n\nYou can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      containers: {\n        '2xs': '16rem',\n      },\n    },\n  },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindcss-container-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailwindlabs%2Ftailwindcss-container-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindcss-container-queries/lists"}