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();

Epic. Thanks that sorted my build.

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

@shmshd I use the tailwind_layout HTML template. When Symfony generates forms, it uses a bootstap layout. I would recommend you customise your form building to use the Tailwind layout (you will need to google this to figure out how to change it). Then purgecss will find this document and will know to keep these classes.
hopefully that makes sense.

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 :)