Object Position - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx";

export const title = "object-position"; export const description = "Utilities for controlling how a replaced element's content should be positioned within its container.";

<ApiTable rows={[ ["object-top-left", "object-position: top left;"], ["object-top", "object-position: top;"], ["object-top-right", "object-position: top right;"], ["object-left", "object-position: left;"], ["object-center", "object-position: center;"], ["object-right", "object-position: right;"], ["object-bottom-left", "object-position: bottom left;"], ["object-bottom", "object-position: bottom;"], ["object-bottom-right", "object-position: bottom right;"], ["object-(<custom-property>)", "object-position: var(<custom-property>);"], ["object-[<value>]", "object-position: <value>;"], ]} />

Examples

Basic example

Use utilities like object-left and object-bottom-right to specify how a replaced element's content should be positioned within its container:

<Figure hint="Hover over examples to see the full image"> <Example padding={false}> { <div className="flex snap-x scroll-p-4 items-end overflow-x-scroll overflow-y-hidden p-8 pt-16 sm:grid sm:grid-cols-3 sm:gap-16"> <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto"> <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> object-top-left </p> <div className="group relative mx-auto size-20 rounded-lg"> <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-left ring-1 ring-black/10 ring-inset"></div>

    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-top
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-top-right
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-right ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-left
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-left ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-center
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-center ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-right
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-right ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-bottom-left
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-left ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-bottom
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
  <div className="relative -mx-8 w-56 shrink-0 snap-start snap-always sm:w-auto">
    <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      object-bottom-right
    </p>
    <div className="group relative mx-auto size-20 rounded-lg">
      <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-right ring-1 ring-black/10 ring-inset"></div>
      
    </div>
  </div>
</div>

} </Example>

html

<!-- [!code classes:object-top-left,object-top-right,object-center,object-bottom-left,object-bottom-right,object-bottom,object-left,object-right,object-top] -->

</Figure>

Using a custom value

Responsive design