Responsive and Containers

Responsive utilities are compiled from Tailwind CSS and depend on runtime dimensions.

<View className="p-4 md:p-8 landscape:flex-row">
  <Text className="text-base md:text-lg">Responsive layout</Text>
</View>

Container queries

Nitrocss can mark a node as a queryable container and apply descendant styles based on measured container size.

<View className="@container/card rounded-xl p-4">
  <Text className="@min-[320px]/card:text-lg @max-[240px]/card:text-sm">Container-aware text</Text>
</View>

The compiled bucket receives a ContainerSize dependency. After layout, the native engine or JS fallback evaluates the container condition and updates affected styles.

Custom container tokens

The compiler also scans custom container-like tokens and emits their base utility so the style can be cloned after the condition matches.

For the full width, height, named-container, and [cq-*] syntax, see Container Queries.