bunch of work

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

@@ -106,7 +106,7 @@ const handleRegistration = async (event) => {
 </script>
 
 <template>
-  <div class="u-max-width-650" style="margin: 0 auto;">
+  <div class="max-w-[650px]" 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>
@@ -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 u-max-width-500 u-margin-block-start-16"
+  class="form u-width-full-line max-w-[500px] u-margin-block-start-16"
   @submit.prevent="handleSubmit"
 >
   <ul class="form-list">

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

@@ -87,7 +87,7 @@ const user = useUserSession();
 </script>
 
 <template>
-  <div class="u-max-width-650" style="margin-inline: auto;">
+  <div class="max-w-[650px]" style="margin-inline: auto;">
     <!-- Idea form component for logged in users -->
     <section v-if="user.current.value" class="card u-margin-32">
       <IdeasForm />
@@ -108,9 +108,10 @@ 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.
@@ -167,14 +168,14 @@ This component should be visible to all users, so no conditional rendering neeed
 <!-- pages/index.vue -->
 
 <template>
-  <div class="u-max-width-650" style="margin: 0 auto;">
+  <div class="max-w-[650px]" 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.