prettify and rm unneeded

src/routes/docs/tutorials/nuxt/step-2/+page.markdoc

@@ -60,7 +60,6 @@ npm run dev
 
 Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase.
 To take advantage of this we need to add the following directories:
-
 - `/components/` to keep our UI components in one place.
   We will get back to it in [step 5](/docs/tutorials/nuxt/step-5)
 - `/composables/`for storing files handling global states and data fetching.
@@ -107,8 +106,8 @@ Add the file `index.vue` with the following code.
 <!-- pages/index.vue -->
 
 <template>
-  <nav class="main-header pr-0">
-    <h3 class="flex-1 eyebrow-heading-1">Hello, Idea Tracker!</h3>
+  <nav class="main-header u-padding-inline-end-0">
+    <h3 class="u-stretch eyebrow-heading-1">Hello, Idea Tracker!</h3>
   </nav>
 </template>
 ```

src/routes/docs/tutorials/nuxt/step-4/+page.markdoc

@@ -106,15 +106,15 @@ const handleRegistration = async (event) => {
 </script>
 
 <template>
-  <div class="max-w-[650px]" style="margin: 0 auto;">
+  <div class="u-max-width-650" style="margin: 0 auto;">
     <section class="card u-margin-32">
       <h2 class="eyebrow-heading-2">Login/Register</h2>
       <AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm>
       <AuthForm v-else :handle-submit="handleLogin" submit-type="Log In"></AuthForm>
-      <button v-if="isSignUp" @click="isSignUp = false" class="mt-4">
+      <button v-if="isSignUp" @click="isSignUp = false" class="u-margin-block-start-16">
         Already have an account? Log in
       </button>
-      <button v-else @click="isSignUp = true" class="mt-4">
+      <button v-else @click="isSignUp = true" class="u-margin-block-start-16">
         Don't have an account? Sign up
       </button>
     </section>
@@ -127,7 +127,7 @@ We will also show buttons to toggle between the two different types of forms.
 
 # Authentication forms {% #auth-forms %}
 
-In the previous step, we defined a `AuthForm` to handle signup and login.
+In the previous step, we defined a `AuthForm` to handle signup and login. 
 Let's build this form now.
 
 Create a new file `components/authForm.vue` and add the following code.
@@ -138,7 +138,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
 
 <template>
 <form
-  class="form u-width-full-line max-w-[500px] mt-4"
+  class="form u-width-full-line u-max-width-500 u-margin-block-start-16"
   @submit.prevent="handleSubmit"
 >
   <ul class="form-list">
@@ -169,7 +169,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
       </div>
     </li>
   </ul>
-  <ul class="buttons-list mt-4">
+  <ul class="buttons-list u-margin-block-start-16">
     <!-- Login button  -->
     <li class="buttons-list-item">
       <button

src/routes/docs/tutorials/nuxt/step-5/+page.markdoc

@@ -22,8 +22,8 @@ const user = useUserSession();
 <template>
   <div>
  <!--- Navbar -->
-    <nav class="main-header pr-0">
-      <h3 class="flex-1 eyebrow-heading-1">Idea Tracker</h3>
+    <nav class="main-header u-padding-inline-end-0">
+      <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
       <!-- Email and logout button if logged in user -->
       <div
         class="main-header-end u-margin-inline-end-16"

src/routes/docs/tutorials/nuxt/step-7/+page.markdoc

@@ -43,7 +43,7 @@ const handleAddIdea = async (event) => {
   <div>
     <article class="container padding-0">
       <h4 class="heading-level-4">Submit Idea</h4>
-      <form @submit.prevent="handleAddIdea" class="mt-4">
+      <form @submit.prevent="handleAddIdea" class="u-margin-block-start-16">
         <ul class="form-list">
           <li class="form-item">
             <label class="label">Title</label>
@@ -87,7 +87,7 @@ const user = useUserSession();
 </script>
 
 <template>
-  <div class="max-w-[650px]" style="margin-inline: auto;">
+  <div class="u-max-width-650" style="margin-inline: auto;">
     <!-- Idea form component for logged in users -->
     <section v-if="user.current.value" class="card u-margin-32">
       <IdeasForm />
@@ -108,10 +108,9 @@ article.box {
   background-color: hsl(var(--color-neutral-0));
 }
 </style>
-```
+````
 
 # Ideas list {% #ideas-list %}
-
 Now that we can get some ideas to show, we go on to build the component for the list of ideas.
 
 Once again, we need to take a moment to think about how this component should work.
@@ -136,13 +135,13 @@ const user = useUserSession();
     <section class="u-margin-32">
       <article class="card">
         <h4 class="heading-level-4">Latest Ideas</h4>
-        <ul class="mt-2">
+        <ul class="u-margin-block-start-8">
           <template v-if="ideas.current.value && ideas.current.value.length">
             <li v-for="idea in ideas.current.value">
               <div class="box">
                 <h5 class="heading-level-6">{{ idea.title }}</h5>
                 <p class="body-text-2">{{ idea.description }}</p>
-                <div class="absolute u-inset-inline-end-8 u-inset-block-start-8">
+                <div class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8">
                   <button class="button is-small is-text is-only-icon" aria-label="Remove item" v-if="user.current.value &&
                     idea.userId === user.current.value.userId
                     " type="button" @click="ideas.remove(idea.$id)">
@@ -168,14 +167,14 @@ This component should be visible to all users, so no conditional rendering neeed
 <!-- pages/index.vue -->
 
 <template>
-  <div class="max-w-[650px]" style="margin: 0 auto;">
+  <div class="u-max-width-650" style="margin: 0 auto;">
     <!-- ... Some skipped code -->
     <IdeasList />
   </div>
 </template>
 
 <!-- ... Some skipped code -->
-```
+````
 
 Congratulations!
 You now have an ideas tracker built with Nuxt and Appwrite to use locally.