Nuxt 中的 Tailwind PostCss 配置

Question

Error Message

"Please use build.postcss in your nuxt.config.js instead of an external config file. Support for such files will be removed in Nuxt 3 as they remove all defaults set by Nuxt and can cause severe problems with features like alias resolving inside your CSS."

Question

How do I change my postcss.config.js file to be in my nuxt.config.js file?

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({
    // Specify the paths to all of the template files in your project
    content: ['./src/**/*.html', './src/**/*.vue'],

    // This is the function used to extract class names from your templates
    defaultExtractor: (content) => {
        // Capture as liberally as possible, including things like `h-(screen-1.5)`
        const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
        const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

        return broadMatches.concat(innerMatches);
    },
});

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
    ],
};

Answer 1

As the error says, please use build.postcss for your configuration. This means that you should place your plugins within nuxt.config.js > build > postcss . For you case, this would look something like:

export default {
    // other config here like head & target
    build: {
        // other build config like babel
        postcss: {
            plugins: {
                require('tailwindcss'),
                require('autoprefixer'),

                ...(process.env.NODE_ENV === 'production' ? 
                    [require('@fullhuman/postcss-purgecss')
                        ({
                            content: ...,
                            defaultExtractor: ...,
                        })
                    ] : []
                ),
            }
        }
    }
}

Most info you will need is documented on the Nuxt docs for the build configuration property