Tailwind Container Queries 2D


A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for width and height values.

Installation

Install the plugin from npm:

``sh
npm install tailwind-container-queries-2d
`

Then add the plugin to your tailwind.config.js file:

`js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-container-queries-2d'),
// ...
],
}
`

Usage

Start by marking an element as a container using the @container class. You can now apply styles based on the container’s width or height using the new @w- and @h- modifiers, in addition to the width-based container breakpoints like @md:, @lg:, and @xl:.

$3

With this version, you can target styles based on either the width or height of the container. Use @w- for width-based breakpoints and @h- for height-based breakpoints. This allows for more granular control over responsive design.

#### Width-Based Breakpoints
For width-based styles, use the @w- prefix:

`html


#### Height-Based Breakpoints
For height-based styles, use the @h- prefix:

`html


By default we provide container sizes from @5xs (4rem) to @7xl (80rem).

$3

You can optionally name containers using the @container/{name} class and use that name in container variants. With the new width- and height-based prefixes, you can specify named containers as well, such as @w-lg/{name} and @h-lg/{name}:

`html


`html


To stop an element from acting as a container, use the @container-normal 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


| Name | CSS |
| ------ |----------------------------------------------|
| @5xs | @container (min-width: 4rem / 64px /) |
| @4xs | @container (min-width: 8rem / 128px /) |
| @3xs | @container (min-width: 12rem / 192px /) |
| @2xs | @container (min-width: 16rem / 256px /) |
| @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:

`js
// tailwind.config.js
module.exports = {
theme: {
extend: {
containers: {
'8xl': '88rem',
},
},
},
}
``

Credits

This plugin is based on the original work in tailwindcss/container-queries by Tailwind Labs.

Special thanks to @kieranm for the initial PR that inspired height-based queries.