forsartis/vue-cli-plugin-tailwind

purgecss issues

Opened this issue · 0 comments

leads commented

Hi, not sure if this is an issue with this plugin or something else but figured I'd ask here.

Using vue-cli for a little app. The app brings in vue components from another vue-cli app:
Footer: () => import('my-components/src/components/FooterV2.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

edit- versions:
node - tried both 12 and 16
"vue-cli-plugin-tailwind": "~1.2.0" (same as imported components)