Tailwindcss not generating the class for custom font.

[MAnfal]

I am trying to add custom font Quicksand from Google fonts and for some reason, tailwindcss is not adding the custom family for it. My files look like following

app.scss

// Add font imports
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

// Add node imports
@import '~tailwindcss/dist/base';
@import '~tailwindcss/dist/components';
@import '~tailwindcss/dist/utilities';

// Add third party imports
@import '../css/third_party/normalize';

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.ts',
    './resources/**/*.vue',
    './resources/**/*.scss',
    './resources/**/*.sass',
    './resources/**/*.css',
    './resources/**/*.html',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        qs: ['Quicksand', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: { extend: {} },
  plugins: [],
};

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
const webpack = require('webpack');
const tailwindcss = require('tailwindcss');

require('laravel-mix-purgecss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

if (mix.inProduction()) {
  mix.disableNotifications().version().sourceMaps();
}

mix.options({
  hmrOptions: {
    host: 'laravel.test',
    port: 8080,
  },
});

mix.webpackConfig({
  resolve: {
    alias: {
      TSRoot: path.resolve(__dirname, 'resources/ts'),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    }),
  ],
});

mix.ts('resources/ts/app.ts', 'public/js').vue();

mix.ts('resources/ts/vendor.ts', 'public/js').vue();

mix
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [tailwindcss('./tailwind.config.js')],
  })
  .purgeCss({
    enabled: mix.inProduction(),
    folders: ['resources'],
    extensions: ['html', 'js', 'css', 'sass', 'scss', 'ts'],
  });

Vue

<template>
  <h1 class="font-mono">Hello World</h1>
  <h1 class="font-serif">Hello World</h1>
  <h1>Hello World</h1>
  <h1 class="font-qs">Hello World</h1>
  <h1 class="font-mono">Hello World</h1>
  <p>{{ inc }}</p>

  <button
    class="bg-pink-900 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    @click="updateInc"
  >
    Button
  </button>
</template>

Result

Please let me know what I am doing wrong here.

[simonswiss]

Hey!

Are you able to share a minimal example in a GitHub repository?

[MAnfal]

Hi,

Thank you for your reply. Is the information above not enough? I am asking because I am trying to do it in a laravel project that I am unable to share and I am not sure if replicating it in a small example will reproduce it or not.

[MAnfal]

I was able to figure it out. I am going to post the solution for anyone else who might be looking for it.

in app.scss, update the following lines

// Add font imports
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

// Add node imports
@import '~tailwindcss/dist/base';
@import '~tailwindcss/dist/components';
@import '~tailwindcss/dist/utilities';

to

// Add font imports
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

// Add node imports
@tailwind base;
@tailwind components;
@tailwind utilities;