---
title: At-Rules
description: "Yamada UI supports CSS at-rules."
---

## Overview

You can configure CSS [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) by using [Style Props](https://yamada-ui.com/docs/styling/style-props.md).

## @media

[@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) to apply styles based on specific conditions, use `_media`.

```tsx
<Center
  borderWidth="1px"
  boxSize="4xs"
  p="md"
  _media={[{ type: "print", css: { color: "success" } }]}
>
  <Text>Print me</Text>
</Center>
```

`print` and other media types have a convenient shortcut.

```tsx
<Center borderWidth="1px" boxSize="4xs" p="md" _print={{ color: "success" }}>
  <Text>Print me</Text>
</Center>
```

:::note
Available @media are [here](https://yamada-ui.com/docs/styling/style-props.md#at-rules).
:::

### Use multiple queries

To use multiple queries, set multiple values in an array.

```tsx
<Box
  w="full"
  p="md"
  color="fg.contrast"
  bg="bg.contrast"
  _media={[
    { maxW: "1440px", css: { bg: "success" } },
    { minW: "481px", maxW: "1280px", css: { bg: "warning" } },
    { maxW: "480px", css: { bg: "danger" } },
  ]}
>
  Box
</Box>
```

### Use arbitrary queries

To use arbitrary queries, use `query`.

```tsx
<Box
  w="full"
  p="md"
  color="fg.contrast"
  bg="bg.contrast"
  _media={[
    {
      query: "(min-width: 977px) and (max-width: 1440px)",
      css: { bg: "success" },
    },
  ]}
>
  Box
</Box>
```

## @container

[@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) to apply styles based on the size or conditions of a specific container, use `_container`.

```tsx
<Center
  containerType="inline-size"
  p="md"
  borderWidth="1px"
  resize="horizontal"
  overflow="auto"
  boxSize="4xs"
>
  <Text
    _container={[{ minW: "320px", maxW: "560px", css: { color: "success" } }]}
  >
    Resize me
  </Text>
</Center>
```

### Specify container name

```tsx
<Center
  containerName="parent"
  containerType="size"
  p="md"
  borderWidth="1px"
  resize="both"
  overflow="auto"
  boxSize="2xs"
>
  <Center
    containerName="child"
    containerType="size"
    p="md"
    borderWidth="1px"
    resize="both"
    overflow="auto"
    boxSize="4xs"
  >
    <Text
      _container={[
        {
          name: "parent",
          orientation: "portrait",
          css: { color: "success" },
        },
        { name: "child", orientation: "landscape", css: { color: "danger" } },
      ]}
    >
      Resize me
    </Text>
  </Center>
</Center>
```

## @supports

[@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) to apply styles based on conditions, use `_supports`.

```tsx
<Box
  _supports={[
    {
      css: {
        color: "success",
      },
      query: "(display: flex)",
    },
  ]}
>
  <Text>Supported flex</Text>
</Box>
```

## @keyframes

[@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) to apply intermediate states of an animation, use `_keyframes`.

```tsx
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
>
  Box
</Box>
```

:::note
Animations have their own documentation. See [Animations](https://yamada-ui.com/docs/styling/animation.md) for more details.
:::

## Arbitrary at-rules

To use arbitrary at-rules, use `css`.

```tsx
<Box
  css={{
    "@<identifier> (RULE)": {
      // Define the style you want to customize.
    },
  }}
>
  Box
</Center>
```