A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
npm install tailwindcss-container-queries-with-max-widthA plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
Install the plugin from npm:
``sh`
npm install @tailwindcss/container-queries
Then add the plugin to your tailwind.config.js file:
`js`
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/container-queries'),
// ...
],
}
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`
In addition to using one of the container sizes provided by default, you can also create one-off sizes using any arbitrary value:
`html
$3
To stop an element from acting as a container, use the
class.
$3
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
`Configuration
By default we ship with the following configured values:
| Name | CSS |
| ------ | -------------------------------------------- |
|
| @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 /) |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',
},
},
},
}
``