docs: update nuxt documentation and branding (tailwindlabs#1678)

* chore: update `Nuxt.js` to `Nuxt`

* chore: update nuxt logo

* chore: make current nuxt version first in list

* feat: use `@nuxtjs/tailwindcss` module + nuxi cli

* Update logo

All logos are in a 40⨉40 bounding box with surrounding whitespace to ensure the logo is visible at all times

* Bring back original version as a separate tab

* Update urls

* Update src/pages/docs/guides/nuxtjs.js

Co-authored-by: Daniel Roe <daniel@roe.dev>

* Update guide

* Tweak wording

* Tweak wording again

This better matches the other guides with similar wording

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

Author: danielroe

src/img/guides/nuxtjs.svg

@@ -6,33 +6,34 @@ import { TabBar } from '@/components/Guides/TabBar.jsx'
 
 let tabs = [
   {
-    name: 'Nuxt 2',
-    href: '#2',
+    name: 'Standard installation',
+    href: '#standard',
     steps: [
       {
         title: 'Create your project',
         body: () => (
           <p>
-            Start by creating a new Nuxt.js 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>.
+            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>
+            .
           </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,22 @@ 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({
+    devtools: { enabled: true },
+>   postcss: {
+>     plugins: {
+>       tailwindcss: {},
+>       autoprefixer: {},
 >     },
-    }
-  }`,
+>   },
+  })`,
         },
       },
       {
@@ -83,7 +82,7 @@ let tabs = [
 >     "./layouts/**/*.vue",
 >     "./pages/**/*.vue",
 >     "./plugins/**/*.{js,ts}",
->     "./nuxt.config.{js,ts}",
+>     "./app.vue",
 >   ],
     theme: {
       extend: {},
@@ -107,21 +106,27 @@ 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({
+    devtools: { enabled: true },
+>   css: ['~/assets/css/main.css'],
+    postcss: {
+      plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+      },
+    },
+  })`,
         },
       },
       {
@@ -141,7 +146,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,14 +158,14 @@ let tabs = [
     ],
   },
   {
-    name: 'Nuxt 3',
-    href: '#3',
+    name: 'Using Nuxt Modules',
+    href: '#modules',
     steps: [
       {
         title: 'Create your project',
         body: () => (
           <p>
-            Start by creating a new Nuxt.js project if you don’t have one set up already. The most
+            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
@@ -178,101 +183,14 @@ let tabs = [
         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.
+            Using nuxi, install the <code>@nuxtjs/tailwindcss</code> module and then run the init
+            command to generate a <code>tailwind.config.js</code> file.
           </p>
         ),
         code: {
           name: 'Terminal',
           lang: 'terminal',
-          code: 'npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init',
-        },
-      },
-      {
-        title: 'Add Tailwind to your PostCSS configuration',
-        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.
-          </p>
-        ),
-        code: {
-          name: 'nuxt.config.js',
-          lang: 'js',
-          code: `  // https://nuxt.com/docs/api/configuration/nuxt-config
-  export default defineNuxtConfig({
->   postcss: {
->     plugins: {
->       tailwindcss: {},
->       autoprefixer: {},
->     },
->   },
-  })`,
-        },
-      },
-      {
-        title: 'Configure your template paths',
-        body: () => (
-          <p>
-            Add the paths to all of your template files in your <code>tailwind.config.js</code>{' '}
-            file.
-          </p>
-        ),
-        code: {
-          name: 'tailwind.config.js',
-          lang: 'js',
-          code: `  /** @type {import('tailwindcss').Config} */
-  module.exports = {
->   content: [
->     "./components/**/*.{js,vue,ts}",
->     "./layouts/**/*.vue",
->     "./pages/**/*.vue",
->     "./plugins/**/*.{js,ts}",
->     "./nuxt.config.{js,ts}",
->     "./app.vue",
->   ],
-    theme: {
-      extend: {},
-    },
-    plugins: [],
-  }`,
-        },
-      },
-      {
-        title: 'Add the Tailwind directives to your CSS',
-        body: () => (
-          <p>
-            Create an <code>./assets/css/main.css</code> file and add the <code>@tailwind</code>{' '}
-            directives for each of Tailwind’s layers.
-          </p>
-        ),
-        code: {
-          name: 'main.css',
-          lang: 'css',
-          code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;',
-        },
-      },
-      {
-        title: 'Add the CSS file globally',
-        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.
-          </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: 'npm install\nnpx nuxi module add @nuxtjs/tailwindcss\nnpx tailwindcss init',
         },
       },
       {
@@ -316,8 +234,8 @@ export default function UsingNuxtJs({ code }) {
 
   return (
     <FrameworkGuideLayout
-      title="Install Tailwind CSS with Nuxt.js"
-      description="Setting up Tailwind CSS in a Nuxt.js project."
+      title="Install Tailwind CSS with Nuxt"
+      description="Setting up Tailwind CSS in a Nuxt project."
     >
       <TabBar tabs={tabs} selectedTabIndex={selectedTabIndex} />
       <Steps steps={tabs[selectedTabIndex].steps} code={code[selectedTabIndex]} />
@@ -337,8 +255,8 @@ export function getStaticProps() {
 
 UsingNuxtJs.layoutProps = {
   meta: {
-    title: 'Install Tailwind CSS with Nuxt.js',
-    description: 'Setting up Tailwind CSS in a Nuxt.js project.',
+    title: 'Install Tailwind CSS with Nuxt',
+    description: 'Setting up Tailwind CSS in a Nuxt project.',
     section: 'Installation',
   },
   Layout: DocumentationLayout,

src/pages/docs/guides/nuxtjs.js

@@ -60,7 +60,7 @@ export default function FrameworkGuides() {
             logo: ViteLogo,
           },
           {
-            name: 'Nuxt.js',
+            name: 'Nuxt',
             slug: 'nuxtjs',
             description: 'Intuitive Vue framework for building universal applications.',
             logo: NuxtJsLogo,

src/pages/docs/installation/framework-guides.js

@@ -5,13 +5,13 @@ export const meta = {
   ogImage: require('./og.jpg'),
   image: require('./1.png'),
   imageAlt: 'Screenshot from the animated introduction to the KeepGrading website.',
-  tech: 'Tailwind CSS, Nuxt.js, Vue',
-  description: 'KeepGrading is a post-production studio focused on color grading. Based in Paris, France, KeepGrading works with some of the World\'s largest brands and artists. The KeepGrading website is built on Nuxt.js and uses Tailwind CSS.',
+  tech: 'Tailwind CSS, Nuxt, Vue',
+  description: 'KeepGrading is a post-production studio focused on color grading. Based in Paris, France, KeepGrading works with some of the World\'s largest brands and artists. The KeepGrading website is built on Nuxt and uses Tailwind CSS.',
 }
 
 <Intro title="Post-production for Justin Bieber and Louis Vuitton.">
 
-KeepGrading is a post-production studio focused on color grading. Based in Paris, France, KeepGrading works with some of the World's largest brands and artists. The KeepGrading website is built on Nuxt.js and uses Tailwind CSS.
+KeepGrading is a post-production studio focused on color grading. Based in Paris, France, KeepGrading works with some of the World's largest brands and artists. The KeepGrading website is built on Nuxt and uses Tailwind CSS.
 
 </Intro>