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

Question

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?

Did you customize purgecss as described in [the tailwind docs](https://tailwindcss.com/docs/controlling-file-size/) ? You need to set a regular expression for the extractor to match the different breakpoint and the colons that they use. — Shaun the Sheep, Jan 06 '20 at 14:18
I followed this guide https://medium.com/notonlycss/how-to-remove-unused-css-ad67421794a7 — Boris Bosnjak, Jan 06 '20 at 14:23
That has nothing to do with tailwinds, I think, so won't make an exception for the tailwinds classes. — Shaun the Sheep, Jan 06 '20 at 14:28
Hmmm yea...That makes sense actually. I will try to follow the official guide from TailwindCSS and see if it works. — Boris Bosnjak, Jan 06 '20 at 14:31
The key bit is `defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []` — Shaun the Sheep, Jan 06 '20 at 14:36
This helped a lot https://github.com/nuxt/nuxt.js/issues/2262 . My app looks nice now :) — Boris Bosnjak, Jan 06 '20 at 14:54

Boris Bosnjak · Accepted Answer · 2020-01-13T14:57:41.117

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'
  ]

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

1 Answers1