Fix class order on background-position page

Author: reinink

src/docs/background-position.mdx

@@ -39,7 +39,7 @@ Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the pos
             bg-top-left
           </p>
           <div className="group relative mx-auto h-20 w-20 rounded-lg">
-            <div className="bg-top-left 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] outline -outline-offset-1 outline-black/10"></div>
+            <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 outline -outline-offset-1 outline-black/10"></div>
             <img
               className="absolute top-0 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
@@ -63,7 +63,7 @@ Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the pos
             bg-top-right
           </p>
           <div className="group relative mx-auto h-20 w-20 rounded-lg">
-            <div className="bg-top-right 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] outline -outline-offset-1 outline-black/10"></div>
+            <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 outline -outline-offset-1 outline-black/10"></div>
             <img
               className="absolute top-0 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
@@ -111,7 +111,7 @@ Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the pos
             bg-bottom-left
           </p>
           <div className="group relative mx-auto h-20 w-20 rounded-lg">
-            <div className="bg-bottom-left 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] outline -outline-offset-1 outline-black/10"></div>
+            <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 outline -outline-offset-1 outline-black/10"></div>
             <img
               className="absolute -top-12 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
@@ -135,7 +135,7 @@ Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the pos
             bg-bottom-right
           </p>
           <div className="group relative mx-auto h-20 w-20 rounded-lg">
-            <div className="bg-bottom-right 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] outline -outline-offset-1 outline-black/10"></div>
+            <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 outline -outline-offset-1 outline-black/10"></div>
             <img
               className="absolute -top-12 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
@@ -149,15 +149,15 @@ Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the pos
 
 ```html
 <!-- [!code classes:bg-top-left,bg-top-right,bg-bottom-right,bg-bottom-left,bg-center,bg-right,bg-top,bg-bottom,bg-left] -->
-<div class="bg-top-left bg-[url(/img/mountains.jpg)]"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div>
 <div class="bg-[url(/img/mountains.jpg)] bg-top"></div>
-<div class="bg-top-right bg-[url(/img/mountains.jpg)]"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div>
 <div class="bg-[url(/img/mountains.jpg)] bg-left"></div>
 <div class="bg-[url(/img/mountains.jpg)] bg-center"></div>
 <div class="bg-[url(/img/mountains.jpg)] bg-right"></div>
-<div class="bg-bottom-left bg-[url(/img/mountains.jpg)]"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div>
 <div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div>
-<div class="bg-bottom-right bg-[url(/img/mountains.jpg)]"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>
 ```
 
 </Figure>