docs: add Tailwindcss guide (#199)

* docs: add tailwindcss guide

* docs: update

---------

Co-authored-by: Selemondev <[email protected]>
Co-authored-by: Ricardo Gobbo de Souza <[email protected]>

Author: 3 people

docs/content/1.getting-started/1.setup.md

@@ -5,24 +5,27 @@ Using Google Fonts in your Nuxt project
 ## Installation
 
 1. Install `@nuxtjs/google-fonts` dependency to your project:
+
 ```bash
 npx nuxi@latest module add google-fonts
 ```
 
 2. Add it to your `modules` section in your `nuxt.config`:
 
 ::code-group
+
 ```ts [nuxt.config (Nuxt 3)]
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/google-fonts']
-})
+  modules: ["@nuxtjs/google-fonts"],
+});
 ```
 
 ```ts [nuxt.config (Nuxt 2)]
 export default {
-  buildModules: ['@nuxtjs/google-fonts']
-}
+  buildModules: ["@nuxtjs/google-fonts"],
+};
 ```
+
 ::
 
 ## Options
@@ -33,34 +36,102 @@ You can customize the module's behavior by using the `googleFonts` property in `
 export default defineNuxtConfig({
   googleFonts: {
     // Options
-  }
-})
+  },
+});
 ```
 
 It is also possible to add the options directly in the module declaration:
 
 ```ts [nuxt.config]
 export default defineNuxtConfig({
   modules: [
-    ['@nuxtjs/google-fonts', {
+    [
+      "@nuxtjs/google-fonts",
+      {
         families: {
           Roboto: true,
           Inter: [400, 700],
-          'Josefin+Sans': true,
+          "Josefin+Sans": true,
           Lato: [100, 300],
           Raleway: {
             wght: [100, 400],
-            ital: [100]
+            ital: [100],
           },
-          Inter: '200..700',
-          'Crimson Pro': {
-            wght: '200..900',
-            ital: '200..700',
-          }
-        }
-    }],
+          Inter: "200..700",
+          "Crimson Pro": {
+            wght: "200..900",
+            ital: "200..700",
+          },
+        },
+      },
+    ],
   ],
-})
+});
 ```
 
 See the [module options](/getting-started/options).
+
+## TailwindCss
+
+1. Install `@nuxtjs/tailwindcss` dependency to your project:
+
+```bash
+npx nuxi@latest module add tailwindcss
+```
+
+2. Add it to your `modules` section in your `nuxt.config`:
+
+::code-group
+
+```ts [nuxt.config (Nuxt 3)]
+export default defineNuxtConfig({
+  modules: ["@nuxtjs/tailwindcss"],
+});
+```
+
+```ts [nuxt.config (Nuxt 2)]
+export default {
+  buildModules: ["@nuxtjs/tailwindcss"],
+};
+```
+
+::
+
+3. Configure your desired google font:
+
+```ts
+export default defineNuxtConfig({
+  googleFonts: {
+    families: {
+      Roboto: true,
+      // Other fonts
+    },
+  },
+});
+```
+
+4. Head over to your `tailwind.config.js` file and configure your font(s):
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["..."],
+  theme: {
+    extend: {
+      fontFamily: {
+        Roboto: "Roboto",
+        // Other fonts
+      },
+    },
+  },
+  plugins: [],
+};
+```
+
+4. Now you can go ahead and use your font:
+
+```html
+<div class="grid place-items-center w-full min-h-screen">
+  <p class="font-Roboto">Hello @nuxtjs/google-fonts + @nuxtjs/tailwindcss</p>
+</div>
+```