Layouts

Top / Right / Bottom / Left

Utilities for sets the placement of a positioned element.

Class

classcss
inset-0top: 0;
right: 0;
bottom: 0;
left: 0
inset-y-0top: 0;
bottom: 0
inset-x-0right: 0;
left: 0
inset-autotop: auto;
right: auto;
bottom: auto;
left: auto
inset-y-autotop: auto;
bottom: auto
inset-x-autoleft: auto;
right: auto
top-autotop: auto
top-0top: 0
top-pxtop: 1px
top-1top: 0.25rem
top-2top: 0.5rem
top-3top: 0.75rem
top-4top: 1rem
top-5top: 1.25rem
top-6top: 1.5rem
top-8top: 2rem
top-10top: 2.5rem
top-12top: 3rem
top-16top: 4rem
top-20top: 5rem
top-24top: 6rem
top-32top: 8rem
top-40top: 10rem
top-48top: 12rem
top-56top: 14rem
top-64top: 16rem
bottom-autobottom: auto
bottom-0bottom: 0
bottom-pxbottom: 1px
bottom-1bottom: 0.25rem
bottom-2bottom: 0.5rem
bottom-3bottom: 0.75rem
bottom-4bottom: 1rem
bottom-5bottom: 1.25rem
bottom-6bottom: 1.5rem
bottom-8bottom: 2rem
bottom-10bottom: 2.5rem
bottom-12bottom: 3rem
bottom-16bottom: 4rem
bottom-20bottom: 5rem
bottom-24bottom: 6rem
bottom-32bottom: 8rem
bottom-40bottom: 10rem
bottom-48bottom: 12rem
bottom-56bottom: 14rem
bottom-64bottom: 16rem
left-autoleft: auto
left-0left: 0
left-pxleft: 1px
left-1left: 0.25rem
left-2left: 0.5rem
left-3left: 0.75rem
left-4left: 1rem
left-5left: 1.25rem
left-6left: 1.5rem
left-8left: 2rem
left-10left: 2.5rem
left-12left: 3rem
left-16left: 4rem
left-20left: 5rem
left-24left: 6rem
left-32left: 8rem
left-40left: 10rem
left-48left: 12rem
left-56left: 14rem
left-64left: 16rem
right-autoright: auto
right-0right: 0
right-pxright: 1px
right-1right: 0.25rem
right-2right: 0.5rem
right-3right: 0.75rem
right-4right: 1rem
right-5right: 1.25rem
right-6right: 1.5rem
right-8right: 2rem
right-10right: 2.5rem
right-12right: 3rem
right-16right: 4rem
right-20right: 5rem
right-24right: 6rem
right-32right: 8rem
right-40right: 10rem
right-48right: 12rem
right-56right: 14rem
right-64right: 16rem

Customize More

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'top',
    //variant: 'responsive',
    property: 'top',
    modifier: (
      '1': '1rem',
      '2': '2rem'
      //...
    )
  )
)

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled