tailwindcss-container-query weekly downloads statistics

tailwindcss-container-query

A plugin that provides CSS Container Queries.

BEFORE STARTING

This plugin relies on container-query-polyfill. You must add it to make this plugin work. We have to rely on polyfills until all browsers have implemented them. see the support table

Installation

Install the plugin from npm:

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

Usage

Container Queries up to 10 are generated by default:

| Class | Query |

| cq-w-4 | @container (min-width: 64px) | | cq-w-6 | @container (min-width: 96px) | | cq-w-9 | @container (min-width: 144px) | | cq-w-16 | @container (min-width: 256px) | | cq-w-22 | @container (min-width: 352px) | | cq-h-4 | @container (min-height: 64px) | | cq-h-6 | @container (min-height: 96px) | | cq-h-9 | @container (min-height: 144px) | | cq-h-16 | @container (min-height: 256px) | | cq-h-22 | @container (min-height: 352px) |

Utilities:

| Class | Property |

| container-type-size | container-type: size | | container-type-inline-size | container-type: inline-size | | container-type-block-size | container-type: block-size | | container-type-style | container-type: style | | container-type-state | container-type: state |

There are no any container-name utilities by default. You should define your own utilities in tailwind.config.js.

Example Usage

.cq-w-6:bg-yellow-400 output:

You can use arbitrary variants too. (You should be using v3.1.0 or higher!)

.cq-w-6:bg-yellow-400 output:

Using Container Names

.cq-w-sb-6:bg-yellow-400 output:

Configuration

You can configure which values and variants are generated by this plugin under the containerQuery, containerType and containerName keys in your tailwind.config.js file:

Demo Page