Nextjs with Tailwindcss & postcss

.browserslistrc

# Browsers that we support


>0.25%
IE 11
not op_mini all
not ie_mob 11
not dead

_app.js

import React from 'react';
import NextApp from 'next/app';
import '../assets/styles/global.css';


class MyApp extends NextApp {
	static async getInitialProps({ query, Component, router, ctx }) {
		let pageProps = {};

		if (Component.getInitialProps) {
			pageProps = await Component.getInitialProps(ctx);
		}
		return { pageProps, locale: ctx.query.lang };
	}

	render() {
		const { Component, pageProps } = this.props;
		return (
					<Component.Layout>
						<Component {...pageProps} />
					</Component.Layout>

		);
	}
}

export default MyApp;

custom-base.css

html {
	scroll-behavior: smooth;
}
:focus {
	outline: 0;
}

.box-sizing {
	box-sizing: border-box;
}

.animation {
	transition: all 200ms ease-in-out;
}
.animation-slow {
	transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@for $i from 1 to 30 {
	.c$(i) {
		transition-delay: calc(400ms + $(i) * 50ms);
	}
}

.dropShadow {
	filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 12px 6px);
}
@media (min-width: 768px) {
	.dropShadow {
		filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 24px 6px);
	}
}

global.css

@import "tailwindcss/base";

@import "./custom-base";

@import "tailwindcss/components";
@import "tailwindcss/utilities";

next.config.js

const path = require('path');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
	enabled: process.env.ANALYZE === 'true',
});
const withReactSvg = require('next-react-svg');
const withSize = require('next-size');
const withPurgeCss = require('next-purgecss');

const nextConfig = {
	webpack: config => {
		// Fixes npm packages that depend on `fs` module
		// eslint-disable-next-line no-param-reassign
		config.node = {
			fs: 'empty',
		};
		return config;
	},

};

module.exports = withPlugins(
	[
		[withCSS],
		[withSize],
		[withBundleAnalyzer],
		[
			withOffline,
			{
				workboxOpts: {
					swDest: 'static/service-worker.js',
				},
			},
		],
		[
			withPurgeCss,
			{
				purgeCss: {
					defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
					whitelist: () => [''],
					whitelistPatterns: [/^c(.*)?$/],
				},
			},
		],
		[
			withReactSvg,
			{
				include: path.resolve(__dirname, 'assets/svg/'),
			},
		],
	],
	nextConfig
);

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-import')(),
		require('tailwindcss')('./tailwind.config.js'),

		require('postcss-preset-env')({
			preserve: false,
			autoprefixer: { grid: true },
			stage: 1,
			features: {
				'color-mod-function': {
					unresolved: 'warn',
				},
				'custom-properties': {
					preserve: false,
				},
				'nesting-rules': true,
			},
		}),
		require('postcss-easing-gradients')(),
		require('postcss-calc')(),
		require('postcss-encode-background-svgs')(),
		require('cssnano')({
			preset: 'default',
		}),
	],
};

tailwind.config.js

module.exports = {
	theme: {
		colors: {
			transparent: 'transparent',
			black: '#000',
			white: '#fff',
			blue: '#0cf',
			grey: '#ecedee',
		},
		container: {
			center: true,
			padding: '2rem',
		},

		extend: {
			borderWidth: {
				'24': '24px',
			},
			fontFamily: {
				sans: [
					'"Helvetica Now"',
					'sans-serif',
					'"Apple Color Emoji"',
					'"Segoe UI Emoji"',
					'"Segoe UI Symbol"',
					'"Noto Color Emoji"',
				],
			},
			fontSize: {
				'4xl': '2.5rem',
				'6xl': '3.375rem',
			},
			maxWidth: {
				'7xl': '82rem',
			},
			minWidtht: {
				md: '768px',
			},
			maxHeight: {
				0: '0',
			},
			zIndex: {
				'100': '100',
				'200': '200',
				'300': '300',
			},
			cursor: {
				grab: 'grab',
			},
			spacing: {
				'28': '6rem',
			},
		},
	},
	corePlugins: {
		appearance: false,
		float: false,
	},
	variants: {},
	plugins: [],
};