At-Rules

CSS at-rules are used to define the behavior of CSS.

In Yamada UI, we particularly support three commonly used at-rules: @media, @container, and @keyframes.

Other at-rules can also be defined using Yamada UI's Style Prop in sx or css.

@media

@media is used to apply styles based on specific media types (such as screen, print) or conditions (such as screen width, resolution) using media queries. This enables the creation of responsive designs that cater to different devices or viewport sizes.

For example, to change the styles displayed in print preview mode using the print media type of @media,

Editable example

<Center
  p="md"
  rounded="md"
  borderWidth="1px"
  boxSize="3xs"
  _media={[{ type: "print", css: { color: "primary" } }]}
>
  Print me
</Center>

Copied!

The above code generates the following CSS:

.Center {
  /* ... */

  @media print {
    color: var(--ui-colors-primary);
  }
}

Copied!

Using Multiple Queries

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

Editable example

<Box
  w="full"
  p="md"
  bg="primary"
  _media={[
    { maxW: "1440px", css: { bg: "secondary" } },
    { minW: "481px", maxW: "1280px", css: { bg: "warning" } },
    { maxW: "480px", css: { bg: "danger" } },
  ]}
  color="white"
>
  This is Box
</Box>

Copied!

The above code generates the following CSS:

.Box {
  /* ... */

  background: var(--ui-colors-primary);

  @media (max-width: 1440px) {
    background: var(--ui-colors-secondary);
  }

  @media (min-width: 481px) and (max-width: 1280px) {
    background: var(--ui-colors-warning);
  }

  @media (max-width: 480px) {
    background: var(--ui-colors-danger);
  }
}

Copied!

Yamada UI recommends using responsive styles with theme tokens. For responsive styles using theme tokens, please check here.

Using Custom Queries

To use custom queries, set a string in query.

Editable example

<Box
  w="full"
  p="md"
  bg="primary"
  _media={[
    {
      query: "(min-width: 977px) and (max-width: 1440px)",
      css: { bg: "secondary" },
    },
  ]}
  color="white"
>
  This is Box
</Box>

Copied!

@container

@container is used to apply styles based on the size or conditions of a specific container using container queries. This allows you to adjust styles according to the size of the container where the content is placed.

Editable example

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

Copied!

The above code generates the following CSS:

.Center {
  container-type: inline-size;
  /* ... */

  @container (min-width: 320px) and (max-width: 560px) {
    color: var(--ui-colors-primary);
  }
}

Copied!

Specifying a Container Name

Editable example

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

Copied!

The above code generates the following CSS:

.Center1 {
  container-name: parent;
  container-type: size;
  /* ... */
}

.Center2 {
  container-name: child;
  container-type: size;
  /* ... */

  @container parent (orientation: portrait) {
    color: var(--ui-colors-primary);
  }

  @container child (orientation: landscape) {
    color: var(--ui-colors-danger);
  }
}

Copied!

@keyframes

@keyframes is used to define the intermediate states of an animation. An animation performs a series of style changes over a specified period of time.

There is a separate section in the documentation for animations. For more details, please check Animation.

Yamada UI does not provide @keyframes as Style Props. If you want to animate an element, please check the above Animation.

Other At-Rules

To use other at-rules, define them in Style Props using sx or css.

Editable example

<Box
  w="full"
  p="md"
  bg="primary"
  sx={{
    "@<identifier> (RULE)": {
      // Define the style you want to customize.
    },
  }}
>
  This is Box
</Center>

Copied!

Edit this page on GitHub

PreviousColor Mode NextAnimation