A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
Install the plugin from npm:
npm install @tailwindcss/container-queriesThen add the plugin to your tailwind.config.js file:
// 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::
<div class="@container">
<div class="@lg:underline">
<!-- This text will be underlined when the container is larger than `32rem` -->
</div>
</div>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:
<div class="@container/main">
<!-- ... -->
<div class="@lg/main:underline">
<!-- This text will be underlined when the "main" container is larger than `32rem` -->
</div>
</div>In addition to using one of the container sizes provided by default, you can also create one-off sizes using any arbitrary value:
<div class="@container">
<div class="@[17.5rem]:underline">
<!-- This text will be underlined when the container is larger than `17.5rem` -->
</div>
</div>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:
<div class="tw-@container">
<!-- ... -->
<div class="@lg:tw-underline">
<!-- ... -->
</div>
</div>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 */) |
You can configure which values are available for this plugin under the containers key in your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
containers: {
'2xs': '16rem',
},
},
},
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent