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

@container

@container/{name}

@sm:

@md:

@lg:

@xl:

@2xl:

@3xl:

@4xl:

@5xl:

@6xl:

@7xl: