Skip to content

Instantly share code, notes, and snippets.

@tomasnorre
Forked from bjo3rnf/webpack.config.js
Created January 6, 2021 19:17
Show Gist options
  • Save tomasnorre/8b76a9852d571056b078a6a329995262 to your computer and use it in GitHub Desktop.
Save tomasnorre/8b76a9852d571056b078a6a329995262 to your computer and use it in GitHub Desktop.
Tailwind CSS in a Symfony Project with Webpack Encore and Purge CSS
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment