Nuxt.js app deployed to Heroku only has TailwindCSS's styles for < SM breakpoint

I deployed my 1st Nuxt.js app to Heroku...Everything went smooth but when I opened the app I realised that every .vue file/component has TailwindCSS styles up untill SM breakpoint. Mobile view is fine, but anything bigger than SM breakpoint is not apllied. I also used Purgecss to remove unused styles but not sure if that can cause the problems... Any ideas on how to fix this?

I fixed my problem just by finding this https://github.com/nuxt/nuxt.js/issues/2262

I created modules folder and added import-tailwind-config.js with the code:

module.exports = function () {
  const tailwindConfig = require('@nuxtjs/tailwindcss')
  this.options.env.tailwind = tailwindConfig
}

And inside nuxt.config.js, outside of module.exports I added

const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

class TailwindExtractor {
  static extract (content) {
    return content.match(/[A-z0-9-:/]+/g) || []
  }
}

As well as this code inside of module.exports

build: {
    extend (config, ctx) {
      config.plugins.push(
        new PurgecssPlugin({
          whitelist: ['html', 'body'],
          paths: glob.sync([
            path.join(__dirname, 'components/**/*.vue'),
            path.join(__dirname, 'layouts/**/*.vue'),
            path.join(__dirname, 'pages/**/*.vue'),
            path.join(__dirname, 'plugins/**/*.vue')
          ]),
          extractors: [{
            extractor: TailwindExtractor,
            extensions: ['html', 'js', 'vue']
          }]
        })
      )
    }
  } 
  modules: [
    '~modules/import-tailwind-config'
  ]