feat: use @nuxtjs/tailwindcss module + nuxi cli

Author: danielroe

src/pages/docs/guides/nuxtjs.js

@@ -31,101 +31,13 @@ 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.
+            Install the <code>@nuxtjs/tailwindcss</code> module.
           </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: 'npx nuxi module add @nuxtjs/tailwindcss',
         },
       },
       {