How to setup Vue & Tailwindcss with Google Fonts and HSL color palette

A step-by-step guide

Image Credits: https://medium.com/@jola_adebayor

Here is a quick guide for setting up your Vue.js application to work with tailwindcss.

We will cover initial installation and bootstrapping, use of Google fonts and adding nine shades of brand colors using HSL color values.

Install vue.js

If you do not have Vue CLI 3 installed on your development machine, please refer to the docs

vue create vue-tailwind

Inside the application directory, install Tailwindcss with Yarn or NPM

yarn add tailwindcss
# or 
npm i tailwindcss

Create your css file

touch src/assets/main.css

… and paste the following code in the created file

// src/assets/main.css
 
@tailwind base;  
@tailwind components;  
@tailwind utilities;

Create Tailwind config file

npx tailwind init

Replace the contents of postcss.config.js with the following:

// postcss.config.js
module.exports = 
{   
  plugins: [         
    require('tailwindcss'),     
    require('autoprefixer'),     
  ] 
}

Add src/assets/main.css to src/main.js

// src/main.js
// ...
import('@/assets/main.css');
// ...

Remove all default styles

Delete the style tag from the src/App.vue file, so the file remains with the template tag only.

Using Google Fonts

For the sake of demonstration, we will replace the default sans font with Niramit from Google Fonts. You are free to use any other based on your brand choice.

// src/assets/main.css
@import url('https://fonts.googleapis.com/css?family=Niramit&display=swap');
// ...

We will place that snippet at the top of our src/assets/main.css

Then we will add the new font to our custom tailwind config file at tailwind.config.js

Add the following snippet between the theme curly brackets of tailwind.config.js

// tailwind.config.js
// ...
fontFamily: {
  'sans': ['Niramit', 'Sans-serif']
}
 
// ...

Custom theme colors

According to Tailwind docs, we can add custom colors to the default color palette the framework offers.

// tailwind.config.js 
module.exports = 
{   
  theme: {     
    colors: {       
      indigo: '#5c6ac4',       
      blue: '#007ace',       
      red: '#de3618',     
    }   
  } 
}

We are taking that customization a step further and define nine shades for each of our custom colors just like the default framework palette.

We will achieve this easily by utilizing HSL (Hue-Saturation-Lightness). You can find more details of HSL by reading this article at W3Schools.

We will have our brand primary color #EF9701 and brand secondary color #3EAC47 added to the tailwind config so that we can access utilities like bg-primary-500 or text-secondary-800 and so on.

First, we will convert our HEX colors to HSL using this online tool at https://convertingcolors.com

After converting our colors we have the following HSL color values: Primary hsl(38, 99%, 47%) and Secondary: hsl(125, 47%, 46%).

Next we will assign these HSL values to 500 accents of the color palette and add darker and lighter shades by subtracting and adding lightness on either side of the middle accent.

// tailwind.config.js
module.exports = {
  theme: {
    ...
    extend: {
      colors: {
        primary: {
          900: hsl('38, 99%, 7%'),
          800: hsl('38, 99%, 17%'),
          700: hsl('38, 99%, 27%'),
          600: hsl('38, 99%, 37%'),
          500: hsl('38, 99%, 47%'),
          400: hsl('38, 99%, 57%'),
          300: hsl('38, 99%, 67%'),
          200: hsl('38, 99%, 77%'),
          100: hsl('38, 99%, 87%')
        }
      }
    }
    ...
  }
}

Resources

Converting Colors

Installation - Tailwind CSS

Installation | Vue CLI

Colors HSL

Google Fonts

Happy coding!!