tailwind position absolute on smaller screens and right on bigger

I have menu that I would like to be positioned to left of the screen when screen is small (let say before SM) and positioned to right when bigger.

<MenuItems
  class="
    absolute left-2 top-24 w-full mt-8
    sm:right-2 sm:top-0 sm:w-max
  "
>

Settings for right-* works as expected when applied alone, however when prefixed with breakpoint sm left-* is taking priority.

Is it a way to use something that would cancel left on bigger screens? like sm:left-none

Solution 1:

Yes auto can be used to cancel positioning values. So use sm:left-auto.

Another (worse) option would be to use right-full on smaller screens. But then your element would be offscreen. Though you could transform it back like this: right-full translate-x-full sm:right-0 sm:translate-x-0