How to setup NuxtJS and TailwindCSS with variable Google Fonts
Tags: nuxt, tailwindcss, googlefonts, beginners
Published: 2022-10-18 14:07:54

### A step-by-step guide

To have a quick setup frontend application using NuxtJS which is a framework built over VueJS and TailwindCSS

we will cover the initial setup and bootstrapping using Google Fonts.

## Install NuxtJS

If you don't have NodeJs installed on your development machine please refer to [docs](https://nodejs.org/en/).

```bash
$ yarn create nuxt-app myapp // yarn package manager 

$ npx create-nuxt-app myapp // node package manager
? Project name: myapp
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
? Continuous integration: None
? Version control system: Git
```

The above command will pull the necessary files to make the application up and running.

## Cleanup scaffold generate code

Delete the Logo component  from  `/components/Logo.vue` as we do not need this for future use

Delete the `<style>` tag from the `/layouts/default.vue` the file remains with `<template>` tag only.

```javascript 
// layouts/default.vue

<template>
  <main>
    <Nuxt />
  </main>
</template>
```

## List all the possible font types available in tailwind to use

Update the new code to the file which has the list of all the available font weights provided by the TailwindCSS. 

```javascript 
// pages/index.vue

<template>
  <main class="container">
    <article v-for="w in weights" :key="w.class" class="mb-5">
      <h1 class="text-4xl">.{{ w.class }}</h1>
      <p class="text-3xl" :class="w.class">ABCDEFGHIJKLMNOPRSTUVWXYZ</p>
      <p class="text-3xl" :class="w.class">abcdefghijklmnopqrstuvwxyz</p>
      <p></p>
    </article>
  </main>
</template>
<script>
export default {
  data: () => ({
    weights: [
      { class: 'font-hairline' },
      { class: 'font-thin' },
      { class: 'font-light' },
      { class: 'font-normal' },
      { class: 'font-medium' },
      { class: 'font-semibold' },
      { class: 'font-bold' },
      { class: 'font-extrabold' },
      { class: 'font-black' },
    ],
  }),
}
</script>
```

## Create CSS file and import Google Font

Add a `main.css` to the assets directory with the font import code from Google Font.

```bash 
$ touch assets/css/main.css
```

To choose a [Google Font](https://fonts.google.com/) you need to visit the [site](https://fonts.google.com/).
Goto Font properties dropdown and check Number of styles to maximum i.e, 18+ Styles so that you do get all the possible styles provided by the Tailwind CSS. 

Choose a font from the grid and under select style choose the styles you wish to have in your application. in my case, I will choose [Raleway](https://fonts.google.com/specimen/Raleway?stylecount=18) with all the different styles provided by the provider.

After you have selected all the appropriate styles for your application you can see all the selected styles under the selected family or chick on the right to corner grid icon to toggle view. 

now to use them copy the code which is present under Use on the web, instead of copying the `<link>` code switch to `@import` and copy the code present inside the `<style>` tag. which you will paste this code in your `main.css` file. 

```css
/*
 * /assets/css/main.css
 *
 * Raleway from Google Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.container {
  @apply mx-auto
}
```

Generate the scaffolding for the TailwindCSS config file

```bash 
$ npx tailwindcss init
```

Add the custom font to `tailwind.config.js`

```javascript 
// ...
theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', ...defaultTheme.fontFamily.sans],
      },
    },
		// ...
  },
// ...
```

Happy Coding!!