CSS not working in prod. Vue.js, Tailwind & Netlify

3
votes

I am extremely puzzled...this is my 2nd vue.js project. It's giving me massive issues when I push the site live.

The app works locally without any issue, but after pushing to netlify and building the CSS doesnt seem to work. I am using purgecss this is my postcss.config.js file:

const IN_PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
    plugins: [
        require('tailwindcss')('tailwind.js'),
        require('autoprefixer')(),
        IN_PRODUCTION &&
            require('@fullhuman/postcss-purgecss')({
                content: ['./public/**/*.html', './src/**/*.vue'],
                defaultExtractor(content) {
                    const contentWithoutStyleBlocks = content.replace(
                        /<style[^]+?<\/style>/gi,
                        ''
                    );
                    return (
                        contentWithoutStyleBlocks.match(
                            /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
                        ) || []
                    );
                },
                whitelist: [],
                whitelistPatterns: [
                    /-(leave|enter|appear)(|-(to|from|active))$/,
                    /^(?!(|.*?:)cursor-move).+-move$/,
                    /^router-link(|-exact)-active$/,
                    /data-v-.*/,
                ],
            }),
    ],
};

As per the TW and PurgeCSS instructions. This again works locally...but not in prod.

Netlify build command is npm run build and it's served from the dist folder.

You can see the app here: https://beautify-urls.netlify.app/ And repo here: https://github.com/mrpbennett/beautify-url

I am not using scoped on my style tags

any ideas would be much appericated.

1
javascriptvue.jsnetlify

1 Answers

1
votes

You need to change the Publish directory field from dist to /dist.

enter image description here