diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index 470cb4c..de41505 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -5,6 +5,7 @@ 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 ``` @@ -12,17 +13,19 @@ 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,8 +36,8 @@ 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: @@ -42,25 +45,93 @@ 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 +
+

Hello @nuxtjs/google-fonts + @nuxtjs/tailwindcss

+
+```