sapper project with tailwind using purgecss and cssnano

rollup.config.js

// @ts-nocheck TODO: remove at some point

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import config from 'sapper/config/rollup.js';
import getPreprocessor from 'svelte-preprocess'
import path from 'path'
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import { terser } from 'rollup-plugin-terser';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;


class SvelteExtractor {
	static extract( content ) {
		return content.match( /[A-Za-z0-9-_:\/]+/g ) || [];
	}
}

const postcssPlugins = ( purgecss = false ) => {
	return [
		require( "postcss-import" )(),
		require( "postcss-url" )(),
		require( "tailwindcss" )( "./tailwind.config.js" ),
		require( "autoprefixer" )( {
			overrideBrowserslist: "last 1 version"
		} ),
		purgecss &&
		require( 'cssnano' )( {
			preset: 'default',
		}),
		// Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools.
		purgecss &&
		require( '@fullhuman/postcss-purgecss' )( {
			content: [ './src/**/*.html',
				'./src/**/*.svelte',
				'./src/**/*.css',
				'./static/**/*.css' ],
			extractors: [ {
				extractor: SvelteExtractor,

				// Specify the file extensions to include when scanning for
				// class names.
				extensions: [ 'svelte', 'css', 'html' ],
			}, ],
			fontFace: true,
			// Whitelist selectors to stop Purgecss from removing them from your CSS.
			whitelist: [ 'html', 'body' ],
		} ),
	].filter( Boolean )
}

const preprocess = getPreprocessor( {
	transformers: {
		postcss: {
			plugins: postcssPlugins() // Don't need purgecss because Svelte handle unused css for you.
		}
	}
} );

const onwarn = ( warning, onwarn ) => ( warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test( warning.message ) ) || onwarn( warning );

export default {
	client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			replace( {
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify( mode )
			} ),
			svelte( {
				dev,
				hydratable: true,
				emitCss: true,
				preprocess
			} ),
			resolve(),
			commonjs(),

			legacy && babel( {
				extensions: [ '.js', '.mjs', '.html', '.svelte' ],
				runtimeHelpers: true,
				exclude: [ 'node_modules/@babel/**' ],
				presets: [
					[ '@babel/preset-env', {
						targets: '> 0.25%, not dead'
					} ]
				],
				plugins: [
					'@babel/plugin-syntax-dynamic-import',
					[ '@babel/plugin-transform-runtime', {
						useESModules: true
					} ]
				]
			} ),

			!dev && terser( {
				module: true
			} )
		],
		onwarn,
	},

	server: {
		input: config.server.input(),
		output: config.server.output(),
		plugins: [
			replace( {
				'process.browser': false,
				'process.env.NODE_ENV': JSON.stringify( mode )
			} ),
			svelte( {
				generate: 'ssr',
				dev,
				preprocess
			} ),
			resolve(),
			commonjs(),
			postcss( {
				plugins: postcssPlugins( !dev ),
				extract: path.resolve( __dirname, './static/global.css' )
			} )
		],
		external: Object.keys( pkg.dependencies ).concat(
			require( 'module' ).builtinModules || Object.keys( process.binding( 'natives' ) )
		),
		onwarn,
	},

	serviceworker: {
		input: config.serviceworker.input(),
		output: config.serviceworker.output(),
		plugins: [
			resolve(),
			replace( {
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify( mode )
			} ),
			commonjs(),
			!dev && terser()
		],
		onwarn,
	}
};