Tailwindcss-module: CSS Not working properly for statically generated site.

[richeduni]

I have a nuxt webpage that uses tailwind and vue2-leaflet.

Everything looks fine in development mode (npm run dev)

However, when I create a static site (npm run generate) and view the dist folder on a local server, the leaflet map doesn't look correct. The map isn't loading properly and the markers are spilling out of the map.

If I remove tailwind, and re-run npm run generate and view the dist folder (the styling doesn't look great) but the map is displayed properly.

If anyone knows how to fix this, I would appreciate your help.

PS I chose tailwind as part on the nuxt project installation process.

And I have the following value in nuxt.config.js

devModules: [ // Doc: https://github.com/nuxt-community/nuxt-tailwindcss '@nuxtjs/tailwindcss', ],

[Atinux]

Hi @richeduni

This may be due to the purgeCSS module that is cleaning some of the vue2-leaflet css I guess.

You may want to whitelist them: https://github.com/Developmint/nuxt-purgecss#append-a-value-to-the-defaults

[richeduni]

Hi, I'm not using purgeCSS. Should I be using it?

I tried adding purgeCSS after your suggestion and it didn't make any difference?

Here is a copy of my nuxt.config.js (In this version I'm not using purgeCSS).

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
      "leaflet.markercluster/dist/MarkerCluster.css",
      "leaflet.markercluster/dist/MarkerCluster.Default.css",
      "vue-slider-component/theme/default.css"
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    {src: "~/plugins/markercluster",ssr: false},
    {src: "~/plugins/slider",ssr: false},
  ],
  /*
  ** Nuxt.js dev-modules
  */
  devModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
      'nuxt-leaflet',
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  },

}

[Atinux]

This module includes purge-css automatically, it's written in the README:

Also written in the README:

If you want to set any (additional) purgeCSS configuration options, you can add a purgeCSS configuration object:

// nuxt.config.js
{
  purgeCSS: {
    whitelist: ['css-selector-to-whitelist'],
  },
}

See full options here: https://github.com/Developmint/nuxt-purgecss#options

[Atinux]

After looking at the CSS and installed nuxt-leaflet, you have to set this config:

purgeCSS: {
    whitelist: ['lvml'],
    whitelistPatterns: [/leaflet-.+$/],
    whitelistPatternsChildren: [/leaflet-.+$/]
  }

You can learn more here: https://www.purgecss.com/whitelisting

[richeduni]

Ahh, didn't realise that nuxt tailwind came with purge css.

Also, thank you very much for that config info. Everything is working now.