> [!NOTE] > As of Tailwind CSS v4.0, container queries are supported in the framework by default and this plugin is no longer required. > > You should only used this if you are using TailwindCSS v3.2+ and need to use max-width container queries.
npm install tailwindcss-container-queries-extended> [!NOTE]
> As of Tailwind CSS v4.0, container queries are supported in the framework by default and this plugin is no longer required.
>
> You should only used this if you are using TailwindCSS v3.2+ and need to use max-width container queries.
A plugin for Tailwind CSS v3.2+ that provides utilities for container queries, including max-width container queries.
This is an extended version of the official @tailwindcss/container-queries plugin with additional features.
This extended version adds support for:
- ✅ Max-width container queries (@max-sm, @max-md, @max-lg, etc.)
- ✅ Container query ranges (e.g., @sm:@max-lg:flex-col)
- ✅ Arbitrary max-width values (e.g., @max-[500px]:hidden)
- ✅ Named containers with max-width (e.g., @max-md/main:flex-col)
Install the plugin from npm:
``sh`
npm install -D tailwindcss-container-queries-extended
Then add the plugin to your tailwind.config.js file:
`js`
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-container-queries-extended'),
// ...
],
}
Start 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::
`html`
By default we provide container sizes from @xs (20rem) to @7xl (80rem).
You can optionally name containers using a @container/{name} class, and then include that name in the container variants using classes like @lg/{name}:underline:
`html`
Use variants like @max-sm and @max-md to apply a style below a specific container size:
`html`
Stack a regular container query variant with a max-width container query variant to target a specific range:
`html`
In addition to using one of the container sizes provided by default, you can also create one-off sizes using any arbitrary value:
`html`
You can also use arbitrary values with max-width container queries:
`html`
To stop an element from acting as a container, use the @container-normal class.
If 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:
`html`
By default we ship with the following configured values:
| Name | CSS |
| ---------- | -------------------------------------------- |
| @xs | @container (min-width: 20rem / 320px /) |@sm
| | @container (min-width: 24rem / 384px /) |@md
| | @container (min-width: 28rem / 448px /) |@lg
| | @container (min-width: 32rem / 512px /) |@xl
| | @container (min-width: 36rem / 576px /) |@2xl
| | @container (min-width: 42rem / 672px /) |@3xl
| | @container (min-width: 48rem / 768px /) |@4xl
| | @container (min-width: 56rem / 896px /) |@5xl
| | @container (min-width: 64rem / 1024px /) |@6xl
| | @container (min-width: 72rem / 1152px /) |@7xl
| | @container (min-width: 80rem / 1280px /) |@max-xs
| | @container (max-width: 20rem / 320px /) |@max-sm
| | @container (max-width: 24rem / 384px /) |@max-md
| | @container (max-width: 28rem / 448px /) |@max-lg
| | @container (max-width: 32rem / 512px /) |@max-xl
| | @container (max-width: 36rem / 576px /) |@max-2xl
| | @container (max-width: 42rem / 672px /) |@max-3xl
| | @container (max-width: 48rem / 768px /) |@max-4xl
| | @container (max-width: 56rem / 896px /) |@max-5xl
| | @container (max-width: 64rem / 1024px /) |@max-6xl
| | @container (max-width: 72rem / 1152px /) |@max-7xl
| | @container (max-width: 80rem / 1280px /) |
You can configure which values are available for this plugin under the containers key in your tailwind.config.js file:
`js``
// tailwind.config.js
module.exports = {
theme: {
extend: {
containers: {
'2xs': '16rem',
},
},
},
}