chore: make current nuxt version first in list

Author: danielroe

src/pages/docs/guides/nuxtjs.js

@@ -6,33 +6,34 @@ import { TabBar } from '@/components/Guides/TabBar.jsx'
 
 let tabs = [
   {
-    name: 'Nuxt 2',
-    href: '#2',
+    name: 'Nuxt 3',
+    href: '#3',
     steps: [
       {
         title: 'Create your project',
         body: () => (
           <p>
             Start by creating a new Nuxt project if you don’t have one set up already. The most
-            common approach is to use{' '}
-            <a href="https://nuxtjs.org/guides/get-started/installation">Create Nuxt App</a>.
+            common approach is to use the{' '}
+            <a href="https://nuxt.com/docs/getting-started/installation">
+              Nuxt Command Line Interface
+            </a>
+            .
           </p>
         ),
         code: {
           name: 'Terminal',
           lang: 'terminal',
-          code: 'npx create-nuxt-app my-project\ncd my-project',
+          code: 'npx nuxi init my-project\ncd my-project',
         },
       },
       {
         title: 'Install Tailwind CSS',
         body: () => (
-          <>
-            <p>
-              Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the
-              init command to generate a <code>tailwind.config.js</code> file.
-            </p>
-          </>
+          <p>
+            Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the
+            init command to generate a <code>tailwind.config.js</code> file.
+          </p>
         ),
         code: {
           name: 'Terminal',
@@ -45,24 +46,21 @@ let tabs = [
         body: () => (
           <p>
             Add <code>tailwindcss</code> and <code>autoprefixer</code> to the{' '}
-            <code>build.postcss.plugins</code> object in your <code>nuxt.config.js</code> file.
+            <code>postcss.plugins</code> object in your <code>nuxt.config.js</code> file.
           </p>
         ),
         code: {
           name: 'nuxt.config.js',
           lang: 'js',
-          code: `  export default {
-    build: {
->     postcss: {
->       postcssOptions: {
->         plugins: {
->           tailwindcss: {},
->           autoprefixer: {},
->         },
->       },
+          code: `  // https://nuxt.com/docs/api/configuration/nuxt-config
+  export default defineNuxtConfig({
+>   postcss: {
+>     plugins: {
+>       tailwindcss: {},
+>       autoprefixer: {},
 >     },
-    }
-  }`,
+>   },
+  })`,
         },
       },
       {
@@ -84,6 +82,7 @@ let tabs = [
 >     "./pages/**/*.vue",
 >     "./plugins/**/*.{js,ts}",
 >     "./nuxt.config.{js,ts}",
+>     "./app.vue",
 >   ],
     theme: {
       extend: {},
@@ -107,21 +106,26 @@ let tabs = [
         },
       },
       {
-        title: 'Import the CSS file',
+        title: 'Add the CSS file globally',
         body: () => (
           <p>
-            Add the newly-created <code>./assets/css/main.css</code> file to the <code>css</code>{' '}
-            array in the <code>nuxt.config.js</code> file.
+            Add your newly-created <code>./assets/css/main.css</code> to the <code>css</code> array
+            in your <code>nuxt.config.js</code> file.
           </p>
         ),
         code: {
           name: 'nuxt.config.js',
           lang: 'js',
-          code: `  export default {
-    css: [
->     '@/assets/css/main.css',
-    ],
-  }`,
+          code: `  // https://nuxt.com/docs/api/configuration/nuxt-config
+  export default defineNuxtConfig({
+>   css: ['~/assets/css/main.css'],
+    postcss: {
+      plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+      },
+    },
+  })`,
         },
       },
       {
@@ -141,7 +145,7 @@ let tabs = [
         title: 'Start using Tailwind in your project',
         body: () => <p>Start using Tailwind’s utility classes to style your content.</p>,
         code: {
-          name: 'App.vue',
+          name: 'app.vue',
           lang: 'html',
           code: `  <template>
 >   <h1 class="text-3xl font-bold underline">
@@ -153,34 +157,33 @@ let tabs = [
     ],
   },
   {
-    name: 'Nuxt 3',
-    href: '#3',
+    name: 'Nuxt 2',
+    href: '#2',
     steps: [
       {
         title: 'Create your project',
         body: () => (
           <p>
             Start by creating a new Nuxt project if you don’t have one set up already. The most
-            common approach is to use the{' '}
-            <a href="https://nuxt.com/docs/getting-started/installation">
-              Nuxt Command Line Interface
-            </a>
-            .
+            common approach is to use{' '}
+            <a href="https://nuxtjs.org/guides/get-started/installation">Create Nuxt App</a>.
           </p>
         ),
         code: {
           name: 'Terminal',
           lang: 'terminal',
-          code: 'npx nuxi init my-project\ncd my-project',
+          code: 'npx create-nuxt-app my-project\ncd my-project',
         },
       },
       {
         title: 'Install Tailwind CSS',
         body: () => (
-          <p>
-            Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the
-            init command to generate a <code>tailwind.config.js</code> file.
-          </p>
+          <>
+            <p>
+              Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the
+              init command to generate a <code>tailwind.config.js</code> file.
+            </p>
+          </>
         ),
         code: {
           name: 'Terminal',
@@ -193,21 +196,24 @@ let tabs = [
         body: () => (
           <p>
             Add <code>tailwindcss</code> and <code>autoprefixer</code> to the{' '}
-            <code>postcss.plugins</code> object in your <code>nuxt.config.js</code> file.
+            <code>build.postcss.plugins</code> object in your <code>nuxt.config.js</code> file.
           </p>
         ),
         code: {
           name: 'nuxt.config.js',
           lang: 'js',
-          code: `  // https://nuxt.com/docs/api/configuration/nuxt-config
-  export default defineNuxtConfig({
->   postcss: {
->     plugins: {
->       tailwindcss: {},
->       autoprefixer: {},
+          code: `  export default {
+    build: {
+>     postcss: {
+>       postcssOptions: {
+>         plugins: {
+>           tailwindcss: {},
+>           autoprefixer: {},
+>         },
+>       },
 >     },
->   },
-  })`,
+    }
+  }`,
         },
       },
       {
@@ -229,7 +235,6 @@ let tabs = [
 >     "./pages/**/*.vue",
 >     "./plugins/**/*.{js,ts}",
 >     "./nuxt.config.{js,ts}",
->     "./app.vue",
 >   ],
     theme: {
       extend: {},
@@ -253,26 +258,21 @@ let tabs = [
         },
       },
       {
-        title: 'Add the CSS file globally',
+        title: 'Import the CSS file',
         body: () => (
           <p>
-            Add your newly-created <code>./assets/css/main.css</code> to the <code>css</code> array
-            in your <code>nuxt.config.js</code> file.
+            Add the newly-created <code>./assets/css/main.css</code> file to the <code>css</code>{' '}
+            array in the <code>nuxt.config.js</code> file.
           </p>
         ),
         code: {
           name: 'nuxt.config.js',
           lang: 'js',
-          code: `  // https://nuxt.com/docs/api/configuration/nuxt-config
-  export default defineNuxtConfig({
->   css: ['~/assets/css/main.css'],
-    postcss: {
-      plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-      },
-    },
-  })`,
+          code: `  export default {
+    css: [
+>     '@/assets/css/main.css',
+    ],
+  }`,
         },
       },
       {
@@ -292,7 +292,7 @@ let tabs = [
         title: 'Start using Tailwind in your project',
         body: () => <p>Start using Tailwind’s utility classes to style your content.</p>,
         code: {
-          name: 'app.vue',
+          name: 'App.vue',
           lang: 'html',
           code: `  <template>
 >   <h1 class="text-3xl font-bold underline">