How to setup NuxtJS and TailwindCSS with variable Google Fonts

#nuxt #tailwindcss #googlefonts #beginners

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.

$ 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.

// 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.

// 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.

$ touch assets/css/main.css

To choose a Google Font you need to visit the site.
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 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.

/*
 * /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

$ npx tailwindcss init

Add the custom font to tailwind.config.js

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