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

So, what if we need page-specific purging of CSS? that way each page contains its own CSS.

Hm, I don't think this is required if you go all Tailwind as the resulting CSS will be really tiny due to the concept of utility classes. Plus I don't know how this should be done. Purge CSS can only scan the markup of your template files and has no knowledge of 'pages'. You can add dedicated entry points for those pages but as stated in the beginning that wouldn't make any sense to me.

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