Container Queries

Nativewind supports container queries, allowing you to style elements based on the size of a parent container rather than the viewport. Use @container to mark an element as a query container, then apply responsive styles with container query variants like @sm:, @md:, @lg:, etc.

Usage

Please refer to the documentation on the Tailwind CSS website

Compatibility

Support applies to the documented values and platforms. See the RC compatibility notes for value limits and native migration alternatives. Browser behavior is evaluated separately.

@container

@container/{name}

@sm:

@md:

@lg:

@xl:

@2xl:

@3xl:

@4xl:

@5xl:

@6xl:

@7xl: