Vue CLI, Tailwind, purgecss and node_modules

Question

Using vue-cli for a little app. The app brings in vue components from another vue-cli app: Footer: () => import('my-components/src/components/footer.vue')

Running vue-cli-service serve, the app shows all the necessary CSS. But using vue-cli-service build, the CSS from the imported component is missing.

Code for tailwind.config.js:

module.exports = {
purge: [
        './src/**/*.{vue,js}',
        './node_modules/my-components/src/**/*.{vue,js}'
    ],
presets: [
    require('my-components/tailwind.config.js')
],
theme: {
    extend: {
        colors: {
            'secondary-dark': '#168b64',
        }
    }
}
}

and postcss.config.js

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('vue-cli-plugin-tailwind/purgecss'),
      require('autoprefixer'),
    ]
}

If I remove require('vue-cli-plugin-tailwind/purgecss'), from postcss.config.js then the CSS does work but the CSS is then a crazy file size. So it does seem to be something to do with the purging.

I've also tried this as the purge section of the config but there is no difference in results

purge: {
    content: [
        './src/**/*.{vue,js}',
        './node_modules/my-components/src/**/*.{vue,js}'
    ]
},

Looks like something is ignoring my purge rules. Any ideas? Thanks

Versions node - tried both 12 and 16

"vue-cli-plugin-tailwind": "~1.2.0" (same as imported components)

It's likely Tailwind 1. Not sure of vue-cli version, but an old one (+2 years)

Vue CLI, Tailwind, purgecss and node_modules

0 Answers0