Skip to content

Instantly share code, notes, and snippets.

@omarkhatibco
Last active January 15, 2020 09:36
Show Gist options
  • Save omarkhatibco/b227d9c380a37ae2ac40e7245c869d35 to your computer and use it in GitHub Desktop.
Save omarkhatibco/b227d9c380a37ae2ac40e7245c869d35 to your computer and use it in GitHub Desktop.
Nextjs with Tailwindcss & postcss
# Browsers that we support
>0.25%
IE 11
not op_mini all
not ie_mob 11
not dead
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;
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);
}
}
@import "tailwindcss/base";
@import "./custom-base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
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
);
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',
}),
],
};
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: [],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment