replace all non local utilties

src/routes/docs/tutorials/+page.svelte

@@ -102,7 +102,7 @@
                         {tutorial.framework}
                       </h3>
                     </header>
-                    <p class="web-sub-body-400 u-margin-block-start-4">
+                    <p class="web-sub-body-400 mt-1">
                       {tutorial.title}
                     </p>
                   </a>

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

@@ -60,6 +60,7 @@ 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.
@@ -106,8 +107,8 @@ Add the file `index.vue` with the following code.
 <!-- pages/index.vue -->
 
 <template>
-  <nav class="main-header u-padding-inline-end-0">
-    <h3 class="u-stretch eyebrow-heading-1">Hello, Idea Tracker!</h3>
+  <nav class="main-header pr-0">
+    <h3 class="flex-1 eyebrow-heading-1">Hello, Idea Tracker!</h3>
   </nav>
 </template>
 ```

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

@@ -111,10 +111,10 @@ const handleRegistration = async (event) => {
       <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="u-margin-block-start-16">
+      <button v-if="isSignUp" @click="isSignUp = false" class="mt-4">
         Already have an account? Log in
       </button>
-      <button v-else @click="isSignUp = true" class="u-margin-block-start-16">
+      <button v-else @click="isSignUp = true" class="mt-4">
         Don't have an account? Sign up
       </button>
     </section>
@@ -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] u-margin-block-start-16"
+  class="form u-width-full-line max-w-[500px] mt-4"
   @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 u-margin-block-start-16">
+  <ul class="buttons-list mt-4">
     <!-- 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 u-padding-inline-end-0">
-      <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
+    <nav class="main-header pr-0">
+      <h3 class="flex-1 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="u-margin-block-start-16">
+      <form @submit.prevent="handleAddIdea" class="mt-4">
         <ul class="form-list">
           <li class="form-item">
             <label class="label">Title</label>
@@ -136,7 +136,7 @@ const user = useUserSession();
     <section class="u-margin-32">
       <article class="card">
         <h4 class="heading-level-4">Latest Ideas</h4>
-        <ul class="u-margin-block-start-8">
+        <ul class="mt-2">
           <template v-if="ideas.current.value && ideas.current.value.length">
             <li v-for="idea in ideas.current.value">
               <div class="box">