CSS Not working properly for statically generated site.

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]

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

[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