How to use container queries with Tailwind

Posted at

As of May 2023, CSS container queries are not yet widely supported by most browsers. However, you can experiment with them by using a polyfill such as cq-prolyfill or css-container-queries.

To use CSS container queries with Tailwind, you would first need to install the polyfill of your choice. Then, you can use the @container at-rule in your CSS to create container-specific styles. Here's an example:

@container (min-width: 640px) {
  .my-container {
    padding: 4rem;
  }
}

This will apply the padding: 4rem style to any element with the class my-container when it is inside a container that is at least 640 pixels wide.

Note that the @container at-rule is currently not supported by most browsers and is only available with the use of a polyfill. As browser support improves, this feature may become more widely available without the need for a polyfill.