Not rendering properly in Nuxt production

[wasimkabir]

I have a Nuxt app with vue-tailwind-picker, it's working fine in development mode, the date picker not rendering properly when I upload it to production. I have attached some screenshots to show my issue. Can anyone help me to solve the issue? I am pretty new to Vue and Nuxt community.

My nuxt.config.js

export default {
  // Disable server side rendering (https://go.nuxtjs.dev/rendering-modes#client-side-rendering-only)
  ssr: false,
  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',
  ...
  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    // { src: '~/plugins/v-tailwind-picker', mode: "client" }
    '~/plugins/v-tailwind-picker',
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Tailwind CSS options
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
  },

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    // '@nuxtjs/pwa',
    // Webfont module
    'nuxt-webfontloader',
  ],

  // Loading Nunio
  webfontloader: {
    google: {
      families: ['Nunito:400,600,700,800'] //Loads Nunito with weights 400,600,700,800
    }
  },

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
  }
}

My v.tailwind.picker.js plugin file:

import Vue from 'vue'
import VueTailwindPicker from 'vue-tailwind-picker'

Vue.use(VueTailwindPicker)

Also the rendered component

<VueTailWindPicker
    :init="false"
    :theme="{
    background: '#1A202C',
    text: 'text-white',
    border: 'border-gray-700',
    currentColor: 'text-gray-200',
    navigation: {
    background: 'bg-gray-800',
    hover: 'hover:bg-gray-700',
    focus: 'bg-gray-700',
    },
    picker: {
    rounded: 'rounded-md',
    selected: {
    background: 'bg-teal-400',
    border: 'border-teal-400',
    hover: 'hover:border-teal-400',
    },
    holiday: 'text-red-400',
    weekend: 'text-green-400',
    event: 'bg-blue-500',
    },
    event: {
    border: 'border-gray-700',
    },
    }"
    @change="(v) => value = v">
    <input v-model="value" placeholder="Select Date" class="form-textbox">
 </VueTailWindPicker>

[mattickx]

I have had the same issue in production. I have tinkered with the purge setting of TailwindCSS but with no solution. Did you find a solution to this problem?

[wasimkabir]

I have had the same issue in production. I have tinkered with the purge setting of TailwindCSS but with no solution. Did you find a solution to this problem?

No. I used another package for the task instead.

[mattickx]

For anyone still looking for a solution, you should add the path to this module directory to the purge array in tailwind.config.js in your Nuxt root directory 👍

[vinayakkulkarni]

Can you please share the solution @mathieumagalhaes?

[mattickx]

Sure @vinayakkulkarni, I used this purge configuration in tailwind.config.js

  purge: {
    enabled: process.env.NODE_ENV !== 'development',
    content: [
      './static/**/*.html',
      './components/**/*.vue',
      './components/**/*.html',
      './layouts/**/*.vue',
      './layouts/**/*.html',
      './pages/**/*.vue',
      './pages/**/*.html',
      path.resolve(
        __dirname,
        './node_modules/vue-tailwind-picker/dist/*.js'
      ),
      path.resolve(__dirname, './node_modules/vue-tailwind-picker/**/*.js'),
    ],
  },

[wasimkabir]

Sure @vinayakkulkarni, I used this purge configuration in tailwind.config.js

  purge: {
    enabled: process.env.NODE_ENV !== 'development',
    content: [
      './static/**/*.html',
      './components/**/*.vue',
      './components/**/*.html',
      './layouts/**/*.vue',
      './layouts/**/*.html',
      './pages/**/*.vue',
      './pages/**/*.html',
      path.resolve(
        __dirname,
        './node_modules/vue-tailwind-picker/dist/*.js'
      ),
      path.resolve(__dirname, './node_modules/vue-tailwind-picker/**/*.js'),
    ],
  },

I'll take a look at your solution and let you know if it's working for me or not.