Tailwind CSS in a Symfony Project with Webpack Encore and Purge CSS

webpack.config.js

const Encore = require('@symfony/webpack-encore');

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
        './templates/**/*.twig',
        './assets/js/**/*.vue',
        './assets/js/**/*.js',
    ],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
});

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('js/app.js', './assets/js/app.js')
    .addStyleEntry('css/app.css', './assets/css/app.scss')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel(() => {
    }, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    .enableSassLoader(sassOptions => {
    }, {
        resolveUrlLoader: false
    })
    .enablePostCssLoader(options => {
        options.plugins = [
            tailwindcss,
            autoprefixer,
        ];
        if (Encore.isProduction()) {
            options.plugins.push(purgecss);
        }
    })
    .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();

Purging won't work properly if we are using Symfony Form

Hi, i had the same problems, i finally use the whitelist option in purgecss (wrap your css between /* purgecss start ignore / and / purgecss end ignore */ ). I hope it can help :)