initial commit, yay

2019-05-23 10:30:31 -06:00 · 2019-05-23 10:30:31 -06:00 · 88f688ad6d
commit 88f688ad6d
49 changed files with 15475 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
--- a/404.php
+++ b/404.php
@ -0,0 +1,22 @@
+<?php
+/**
+ * The template for displaying 404 pages (not found).
+ *
+ * @link https://codex.wordpress.org/Creating_an_Error_404_Page
+ *
+ * @package Freeshifter
+ */
+
+get_header(); ?>
+
+<main class="content-wrap">
+	<section class="container mx-auto relative z-10">
+		<h1>Oops! That page can't be found.</h1>
+		<p>It looks like nothing was found at this location. Maybe try one of the links below or a search?</p>
+		<?php
+		get_search_form(); ?>
+	</section>
+</main>
+
+<?php
+get_footer();
--- a/README.md
+++ b/README.md
@ -0,0 +1,30 @@
+# WordPress Tailwind Starter Theme
+A minimalistic WordPress starter theme, based on Tailwind and PurgeCSS.
+
+## How to get started
+1. Clone or [download](https://github.com/freeshifter/wp-tailwind/archive/master.zip "Download the WP Tailwind Zip") the project onto your `themes` directory `(./wp-content/themes)`
+2. Run a find/replace for the following strings:
+- `wp-tailwind`
+- `WP_Tailwind`
+- `wp_tailwind_`
+3. Run `npm install` 
+4. Update the BrowserSyncPlugin configuration in `webpack.config.js` to the domain of your local installation.
+4. Run `npm start` to begin development server.
+
+## Webpack
+The theme uses Webpack as its bundler with ES6 modules for JavaScript files. It also compresses images found in src automatically, and maps images to the appropriate destination through the `@images` alias. For example, `@images/example.jpg` would be compiled to `../images/example.jpg`.
+
+## Deployment 
+```bash
+npm run build
+```
+This will run both a production and development set of webpack tasks. The enqueue hook will load the correct version of the JS file, based on whether your development/staging server's `SCRIPT_DEBUG` constant is set to `true`.
+
+## Tailwind
+Using the `tailwind.js` file, you can customize Tailwind's default styles before things get compiled. For more information on configuration, [see detailed documentation on Tailwind](https://tailwindcss.com/).
+
+## PurgeCSS
+*WP Tailwind* uses PurgeCSS to remove unused styles from the production build. It scans your project directory for strings that match SCSS declarations. You can modify the directories to search for in the `webpack.config.js` file. **Always check your production build to make sure styles you were developing with compiled correctly.**
+
+### Credits
+Originally inspired by the Heisenberg by Zeek Interactive.
--- a/archive.php
+++ b/archive.php
@ -0,0 +1,25 @@
+<?php
+/**
+ * The default archive page template.
+ *
+ * @author Freeshifter LLC
+ * @since 1.0.0
+ */
+
+namespace WP_Tailwind;
+
+get_header(); ?>
+	<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start">
+		<h1><?= get_the_archive_title(); ?></h1>
+		<div class="lg:w-3/5 pr-10">
+			<?php
+			if ( have_posts() ) {
+				while ( have_posts() ) {
+					the_post();
+					echo get_template_part( 'content-templates/content', 'article' );
+				}
+			} ?>
+		</div>
+	</div>
+	<?php
+get_footer();
--- a/assets/css/app.css
+++ b/assets/css/app.css
@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "whitelist/whitelist.css";
+@import "conditional/conditional.css";
--- a/assets/css/conditional/article.css
+++ b/assets/css/conditional/article.css
@ -0,0 +1,41 @@
+.post-title {
+	@apply text-4xl mb-0;
+
+	@screen lg {
+		@apply text-5xl;
+	}
+}
+
+.article {
+	@apply mt-8;
+
+	> p:first-of-type {
+		@apply text-lg;
+	}
+
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		@apply font-bold;
+	}
+
+	h4,
+	h5,
+	h6 {
+		text-transform: uppercase;
+	}
+
+	@screen lg {
+		p,
+		ul,
+		ol {
+			@apply mt-4 mb-8 leading-normal;
+		}
+
+		p.text-sm {
+			@apply text-sm;
+		}
+	}
+}
--- a/assets/css/conditional/conditional.css
+++ b/assets/css/conditional/conditional.css
@ -0,0 +1,2 @@
+@import "header";
+@import "article";
--- a/assets/css/conditional/header.css
+++ b/assets/css/conditional/header.css
@ -0,0 +1,12 @@
+.header {
+	@apply py-2 z-10 bg-gray-100;
+
+	@screen lg {
+		@apply py-6;
+	}
+
+	.container {
+		@apply flex justify-between items-center;
+	}
+}
+
--- a/assets/css/whitelist/buttons.css
+++ b/assets/css/whitelist/buttons.css
@ -0,0 +1,55 @@
+.button {
+	@apply font-sans not-italic font-light rounded bg-gray-800 border-2 border-gray-800 leading-normal inline-block no-underline text-gray-200 px-6 py-4 shadow-lg text-center;
+	transform: translateY(0);
+
+	@screen lg {
+		@apply px-12 py-4;
+	}
+
+	&:focus,
+	&:hover {
+		@apply text-white border-gray-800 bg-gray-800 no-underline shadow;
+		transform: translate3d(1px, 2px, 0);
+		cursor: pointer;
+	}
+}
+
+.button-white {
+	@extend .button;
+	@apply bg-gray-100 text-gray-800;
+
+	&:focus,
+	&:hover {
+		@apply bg-white text-gray-600;
+	}
+}
+
+.button-primary {
+	@extend .button;
+	@apply bg-primary-100 text-white border-none;
+
+	&:focus,
+	&:hover {
+		@apply border-primary-100 bg-primary-100 text-white bg-primary-200;
+	}
+}
+
+.button-link {
+	@apply font-bold font-serif not-italic;
+}
+
+.highlight {
+	@apply font-bold font-sans not-italic text-primary-100;
+}
+
+.button-sm {
+	@apply px-4 py-2 text-sm;
+}
+
+.button-lg {
+	@apply px-12 py-4;
+
+	@screen lg {
+		@apply py-6;
+	}
+}
--- a/assets/css/whitelist/forms.css
+++ b/assets/css/whitelist/forms.css
@ -0,0 +1,44 @@
+label {
+	@apply text-sm font-sans uppercase font-bold;
+}
+
+input,
+textarea,
+select {
+	@apply border-2 bg-gray-100 leading-normal rounded w-full py-3 px-4 mb-2 italic text-base w-full border-gray-300;
+	@extend .transition;
+
+	&[aria-invalid="true"] {
+		@apply border-primary-100;
+	}
+
+	&:focus {
+		@apply shadow-lg bg-gray-100 border-gray-200;
+		transform: translate3d(-1px, -1px, 0);
+		outline: 0;
+	}
+}
+
+input,
+textarea {
+	&:focus {
+		@apply border-gray-800;
+	}
+}
+
+textarea {
+	@apply h-24;
+}
+
+select {
+	@apply h-12 bg-gray-100;
+
+	option {
+		@apply bg-white;
+	}
+
+	&:focus {
+		@apply shadow-none border-gray-300;
+		transform: none;
+	}
+}
--- a/assets/css/whitelist/icons.css
+++ b/assets/css/whitelist/icons.css
@ -0,0 +1,17 @@
+.svg-icon {
+	width: 1em;
+	height: 1em;
+
+	path,
+	polygon,
+	rect {
+		@apply fill-current;
+	}
+
+	circle {
+		@apply stroke-current;
+		stroke-width: 1;
+	}
+}
+
+
--- a/assets/css/whitelist/navigation.css
+++ b/assets/css/whitelist/navigation.css
@ -0,0 +1,113 @@
+.nav-primary {
+	@apply hidden;
+
+	a {
+		@apply text-gray-800 italic no-underline font-normal;
+
+		&:focus,
+		&:hover {
+			@apply underline;
+		}
+	}
+
+	li {
+		@apply leading-tight;
+	}
+
+	.highlight {
+		@apply text-primary-100 not-italic font-bold;
+	}
+
+	.button {
+		@apply text-white;
+	}
+
+	.current-menu-item a {
+		@apply font-bold not-italic;
+	}
+
+	@screen md {
+		@apply block;
+
+		.dark-header & {
+			transform: none;
+		}
+
+		li {
+			@apply mb-0;
+
+			&:last-child a {
+				@apply mr-0;
+			}
+		}
+
+		a {
+			@apply mx-4;
+		}
+
+		.button {
+			@extend .button-sm;
+		}
+
+		.sub-menu {
+			@apply hidden absolute bg-white shadow-lg;
+			@extend .list-reset;
+
+			a {
+				@apply text-gray-200;
+			}
+		}
+
+		.menu-item-has-children {
+			@apply relative;
+
+			&:hover {
+				.sub-menu {
+					@apply block;
+				}
+			}
+		}
+	}
+}
+
+.nav-mobile {
+	@extend .nav-primary, .transition;
+	@apply fixed left-0 top-0 h-full bg-white p-4 z-50 w-full overflow-scroll block z-50 text-center;
+	transform: translate3d(-100%, 0, 0);
+
+	&.active {
+		transform: translate3d(0, 0, 0);
+	}
+
+	a {
+		@apply block w-full text-2xl;
+	}
+
+	@screen md {
+		@apply hidden;
+	}
+
+	.admin-bar & {
+		top: 46px;
+
+		@screen md {
+			top: 32px;
+		}
+	}
+}
+
+
+@screen md {
+	.toggle {
+		@apply hidden;
+	}
+}
+
+.footer-menu {
+	@apply pl-0 ml-0;
+	@extend .list-reset;
+
+	a {
+		@apply text-white not-italic;
+	}
+}
--- a/assets/css/whitelist/transitions.css
+++ b/assets/css/whitelist/transitions.css
@ -0,0 +1,13 @@
+.transition {
+	transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+a,
+.button,
+.button-large,
+.button-lg,
+.button-primary,
+.button-bg-primary-200,
+.button-bg-primary-200 .icon {
+	@extend .transition;
+}
--- a/assets/css/whitelist/type.css
+++ b/assets/css/whitelist/type.css
@ -0,0 +1,111 @@
+html {
+	font-size: 18px;
+}
+
+body {
+	@apply bg-gray-100 font-serif text-base font-light leading-normal antialiased;
+}
+
+strong,
+b {
+	@apply font-bold;
+}
+
+p {
+	@apply mt-2 mb-4;
+}
+
+a {
+	@apply text-primary-100 underline font-bold;
+
+	&:focus,
+	&:hover {
+		@apply text-gray-600;
+	}
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@apply mt-8 mb-4 font-sans font-light;
+
+	@screen lg {
+		@apply mt-12;
+	}
+}
+
+h1,
+h2,
+h3 {
+	@apply leading-tight;
+}
+
+h4,
+h5,
+h6 {
+	@apply leading-normal;
+}
+
+h1 {
+	@apply text-5xl;
+}
+
+h2 {
+	@apply text-4xl;
+}
+
+h3 {
+	@apply text-3xl;
+}
+
+h4 {
+	@apply text-2xl;
+}
+
+h5 {
+	@apply text-xl;
+}
+
+h6 {
+	@apply text-xl tracking-wide;
+}
+
+ul,
+ol {
+	@apply mt-4 mb-10 ml-2;
+
+	@screen lg {
+		@apply ml-8;
+	}
+}
+
+li {
+	@apply mb-2;
+
+	.sidebar &,
+	.article & {
+		list-style-type: disc;
+	}
+}
+
+blockquote {
+	@apply text-center italic m-10;
+
+	@screen lg {
+		@apply m-16 text-lg;
+	}
+}
+
+.list-reset {
+	display: inline-block;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+::selection {
+	@apply bg-primary-100 text-gray-200;
+}
--- a/assets/css/whitelist/whitelist.css
+++ b/assets/css/whitelist/whitelist.css
@ -0,0 +1,7 @@
+@import "type.css";
+@import "navigation.css";
+@import "buttons.css";
+@import "transitions.css";
+@import "icons.css";
+@import "forms.css";
+@import "wordpress.css";
--- a/assets/css/whitelist/wordpress.css
+++ b/assets/css/whitelist/wordpress.css
@ -0,0 +1,28 @@
+.alignright {
+	@apply float-right ml-4 mb-4;
+}
+
+.alignleft {
+	@apply float-left mr-4 mb-4;
+}
+
+.aligncenter {
+	@apply mx-auto;
+}
+
+img {
+	@apply rounded;
+}
+
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}
--- a/assets/images/svg/icon-chart.svg
+++ b/assets/images/svg/icon-chart.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M10.281,1.781C5.75,1.781,2.062,5.469,2.062,10s3.688,8.219,8.219,8.219S18.5,14.531,18.5,10S14.812,1.781,10.281,1.781M10.714,2.659c3.712,0.216,6.691,3.197,6.907,6.908h-6.907V2.659z M10.281,17.354c-4.055,0-7.354-3.298-7.354-7.354c0-3.911,3.067-7.116,6.921-7.341V10c0,0.115,0.045,0.225,0.127,0.305l5.186,5.189C13.863,16.648,12.154,17.354,10.281,17.354M15.775,14.882l-4.449-4.449h6.295C17.522,12.135,16.842,13.684,15.775,14.882"></path>
+</svg>
--- a/assets/images/svg/icon-gear.svg
+++ b/assets/images/svg/icon-gear.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"></path>
+</svg>
--- a/assets/images/svg/icon-growth.svg
+++ b/assets/images/svg/icon-growth.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"></path>
+</svg>
--- a/assets/images/svg/icon-instagram.svg
+++ b/assets/images/svg/icon-instagram.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path fill="none" d="M14.52,2.469H5.482c-1.664,0-3.013,1.349-3.013,3.013v9.038c0,1.662,1.349,3.012,3.013,3.012h9.038c1.662,0,3.012-1.35,3.012-3.012V5.482C17.531,3.818,16.182,2.469,14.52,2.469 M13.012,4.729h2.26v2.259h-2.26V4.729z M10,6.988c1.664,0,3.012,1.349,3.012,3.012c0,1.664-1.348,3.013-3.012,3.013c-1.664,0-3.012-1.349-3.012-3.013C6.988,8.336,8.336,6.988,10,6.988 M16.025,14.52c0,0.831-0.676,1.506-1.506,1.506H5.482c-0.831,0-1.507-0.675-1.507-1.506V9.247h1.583C5.516,9.494,5.482,9.743,5.482,10c0,2.497,2.023,4.52,4.518,4.52c2.494,0,4.52-2.022,4.52-4.52c0-0.257-0.035-0.506-0.076-0.753h1.582V14.52z"></path>
+</svg>
--- a/assets/images/svg/icon-knowledge.svg
+++ b/assets/images/svg/icon-knowledge.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M14.68,12.621c-0.9,0-1.702,0.43-2.216,1.09l-4.549-2.637c0.284-0.691,0.284-1.457,0-2.146l4.549-2.638c0.514,0.661,1.315,1.09,2.216,1.09c1.549,0,2.809-1.26,2.809-2.808c0-1.548-1.26-2.809-2.809-2.809c-1.548,0-2.808,1.26-2.808,2.809c0,0.38,0.076,0.741,0.214,1.073l-4.55,2.638c-0.515-0.661-1.316-1.09-2.217-1.09c-1.548,0-2.808,1.26-2.808,2.809s1.26,2.808,2.808,2.808c0.9,0,1.702-0.43,2.217-1.09l4.55,2.637c-0.138,0.332-0.214,0.693-0.214,1.074c0,1.549,1.26,2.809,2.808,2.809c1.549,0,2.809-1.26,2.809-2.809S16.229,12.621,14.68,12.621M14.68,2.512c1.136,0,2.06,0.923,2.06,2.06S15.815,6.63,14.68,6.63s-2.059-0.923-2.059-2.059S13.544,2.512,14.68,2.512M5.319,12.061c-1.136,0-2.06-0.924-2.06-2.06s0.923-2.059,2.06-2.059c1.135,0,2.06,0.923,2.06,2.059S6.454,12.061,5.319,12.061M14.68,17.488c-1.136,0-2.059-0.922-2.059-2.059s0.923-2.061,2.059-2.061s2.06,0.924,2.06,2.061S15.815,17.488,14.68,17.488"></path>
+</svg>
--- a/assets/images/svg/icon-mark-white.svg
+++ b/assets/images/svg/icon-mark-white.svg
@ -0,0 +1,4 @@
+<svg class="svg-icon" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25.5" cy="25.5" r="23.5" stroke="white" stroke-width="4"/>
+<path d="M36.5755 14L24.9174 22.7789C24.7517 22.7652 24.5859 22.7515 24.4201 22.7515C21.9753 22.7515 20 24.7069 20 27.1273C20 29.5476 21.9753 31.503 24.4201 31.503C26.865 31.503 28.8403 29.5476 28.8403 27.1273C28.8403 26.9632 28.8265 26.7991 28.8127 26.635L37.6806 15.0939L36.5755 14Z" fill="white"/>
+</svg>
--- a/assets/images/svg/icon-person.svg
+++ b/assets/images/svg/icon-person.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path fill="none" d="M12.443,9.672c0.203-0.496,0.329-1.052,0.329-1.652c0-1.969-1.241-3.565-2.772-3.565S7.228,6.051,7.228,8.02c0,0.599,0.126,1.156,0.33,1.652c-1.379,0.555-2.31,1.553-2.31,2.704c0,1.75,2.128,3.169,4.753,3.169c2.624,0,4.753-1.419,4.753-3.169C14.753,11.225,13.821,10.227,12.443,9.672z M10,5.247c1.094,0,1.98,1.242,1.98,2.773c0,1.531-0.887,2.772-1.98,2.772S8.02,9.551,8.02,8.02C8.02,6.489,8.906,5.247,10,5.247z M10,14.753c-2.187,0-3.96-1.063-3.96-2.377c0-0.854,0.757-1.596,1.885-2.015c0.508,0.745,1.245,1.224,2.076,1.224s1.567-0.479,2.076-1.224c1.127,0.418,1.885,1.162,1.885,2.015C13.961,13.689,12.188,14.753,10,14.753z M10,0.891c-5.031,0-9.109,4.079-9.109,9.109c0,5.031,4.079,9.109,9.109,9.109c5.031,0,9.109-4.078,9.109-9.109C19.109,4.969,15.031,0.891,10,0.891z M10,18.317c-4.593,0-8.317-3.725-8.317-8.317c0-4.593,3.724-8.317,8.317-8.317c4.593,0,8.317,3.724,8.317,8.317C18.317,14.593,14.593,18.317,10,18.317z"></path>
+</svg>
--- a/assets/images/svg/icon-ribbon.svg
+++ b/assets/images/svg/icon-ribbon.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M15.94,10.179l-2.437-0.325l1.62-7.379c0.047-0.235-0.132-0.458-0.372-0.458H5.25c-0.241,0-0.42,0.223-0.373,0.458l1.634,7.376L4.06,10.179c-0.312,0.041-0.446,0.425-0.214,0.649l2.864,2.759l-0.724,3.947c-0.058,0.315,0.277,0.554,0.559,0.401l3.457-1.916l3.456,1.916c-0.419-0.238,0.56,0.439,0.56-0.401l-0.725-3.947l2.863-2.759C16.388,10.604,16.254,10.22,15.94,10.179M10.381,2.778h3.902l-1.536,6.977L12.036,9.66l-1.655-3.546V2.778z M5.717,2.778h3.903v3.335L7.965,9.66L7.268,9.753L5.717,2.778zM12.618,13.182c-0.092,0.088-0.134,0.217-0.11,0.343l0.615,3.356l-2.938-1.629c-0.057-0.03-0.122-0.048-0.184-0.048c-0.063,0-0.128,0.018-0.185,0.048l-2.938,1.629l0.616-3.356c0.022-0.126-0.019-0.255-0.11-0.343l-2.441-2.354l3.329-0.441c0.128-0.017,0.24-0.099,0.295-0.215l1.435-3.073l1.435,3.073c0.055,0.116,0.167,0.198,0.294,0.215l3.329,0.441L12.618,13.182z"></path>
+</svg>
--- a/assets/images/svg/icon-search.svg
+++ b/assets/images/svg/icon-search.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
+</svg>
--- a/assets/images/svg/icon-toolbox.svg
+++ b/assets/images/svg/icon-toolbox.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path d="M17.283,5.549h-5.26V4.335c0-0.222-0.183-0.404-0.404-0.404H8.381c-0.222,0-0.404,0.182-0.404,0.404v1.214h-5.26c-0.223,0-0.405,0.182-0.405,0.405v9.71c0,0.223,0.182,0.405,0.405,0.405h14.566c0.223,0,0.404-0.183,0.404-0.405v-9.71C17.688,5.731,17.506,5.549,17.283,5.549 M8.786,4.74h2.428v0.809H8.786V4.74z M16.879,15.26H3.122v-4.046h5.665v1.201c0,0.223,0.182,0.404,0.405,0.404h1.618c0.222,0,0.405-0.182,0.405-0.404v-1.201h5.665V15.26z M9.595,9.583h0.81v2.428h-0.81V9.583zM16.879,10.405h-5.665V9.19c0-0.222-0.183-0.405-0.405-0.405H9.191c-0.223,0-0.405,0.183-0.405,0.405v1.215H3.122V6.358h13.757V10.405z"></path>
+</svg>
--- a/assets/images/svg/icon-twitter.svg
+++ b/assets/images/svg/icon-twitter.svg
@ -0,0 +1,3 @@
+<svg class="svg-icon" viewBox="0 0 20 20">
+	<path fill="none" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path>
+</svg>
--- a/assets/images/svg/monitor-window.svg
+++ b/assets/images/svg/monitor-window.svg
@ -0,0 +1,40 @@
+<svg class="z-0 lg:absolute pin-r pin-b w-1/2 lg:opacity-25 xl:opacity-100 lg:w-auto" width="600px" height="385" viewBox="0 0 398 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>monitor-window</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="monitor-window" transform="translate(1.000000, 1.000000)">
+            <path d="M20.7272727,201.954545 L375.272727,201.954545" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M0.272727273,201.954545 L11.6363636,201.954545" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M384.363636,201.954545 L395.727273,201.954545" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M81.8272727,60.4090909 L294.172727,60.4090909 C296.160952,60.4090909 297.772727,62.0208658 297.772727,64.0090909 L297.772727,189.809091 C297.772727,191.797316 296.160952,193.409091 294.172727,193.409091 L81.8272727,193.409091 C79.8390476,193.409091 78.2272727,191.797316 78.2272727,189.809091 L78.2272727,128.686189 L78.2272727,64.0090909 C78.2272727,62.0208658 79.8390476,60.4090909 81.8272727,60.4090909 Z" id="Rectangle" fill="#F5DDDC" fill-rule="nonzero"></path>
+            <path d="M211,60.4090909 L97.0454545,60.4090909 C93.717068,60.4090909 87.4443407,60.4090909 78.2272727,60.4090909 C78.2272727,69.3542688 78.2272727,75.6269961 78.2272727,79.2272727 L78.2272727,193.181818 L211,60.4090909 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x="78.2272727" y="60.4090909" width="219.545455" height="133" rx="3.6"></rect>
+            <path d="M278.954545,217.227273 C283.984699,217.288028 288.829771,215.332257 292.408173,211.796557 C295.986575,208.260857 298.000367,203.439611 298,198.409091 L298,192.136364 L78.2272727,192.136364 L78.2272727,198.409091 C78.2272727,208.802086 86.6524597,217.227273 97.0454545,217.227273 L278.954545,217.227273 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+            <polygon id="Path" fill="#FFFFFF" fill-rule="nonzero" points="206.818182 242.318182 169.181818 242.318182 172.318182 217.227273 203.681818 217.227273"></polygon>
+            <polygon id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="206.818182 242.318182 169.181818 242.318182 172.318182 217.227273 203.681818 217.227273"></polygon>
+            <path d="M228.772727,254.863636 L147.227273,254.863636 C147.227273,247.934973 152.844064,242.318182 159.772727,242.318182 L216.181818,242.318182 C223.117873,242.318137 228.747687,247.927627 228.772727,254.863636 L228.772727,254.863636 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M128.409091,38.4545455 L310.227273,38.4545455 L310.227273,146.727273 C310.227273,152.752197 305.343106,157.636364 299.318182,157.636364 L139.318182,157.636364 C133.293257,157.636364 128.409091,152.752197 128.409091,146.727273 L128.409091,38.4545455 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M139.318182,0.818181818 L299.409091,0.818181818 C305.434015,0.818181818 310.318182,5.70234818 310.318182,11.7272727 L310.318182,38.4545455 L128.5,38.4545455 L128.5,11.7272727 C128.499792,5.73767257 133.32879,0.868095149 139.318182,0.818181818 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
+            <circle id="Oval" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="147.227273" cy="19.6363636" r="6.27272727"></circle>
+            <circle id="Oval" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="172.318182" cy="19.6363636" r="6.27272727"></circle>
+            <circle id="Oval" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="197.409091" cy="19.6363636" r="6.27272727"></circle>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="184.863636" y="76.0909091" width="25.0909091" height="25.0909091" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="225.636364" y="76.0909091" width="25.0909091" height="25.0909091" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="266.409091" y="76.0909091" width="25.0909091" height="25.0909091" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="184.863636" y="113.727273" width="25.0909091" height="25.0909091" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="225.636364" y="113.727273" width="25.0909091" height="25.0909091" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="266.409091" y="113.727273" width="25.0909091" height="25.0909091" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="147.227273" y="51" width="25.0909091" height="12.5454545" rx="1"></rect>
+            <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linejoin="round" x="184.863636" y="51" width="106.636364" height="12.5454545" rx="1"></rect>
+            <path d="M147.227273,76.0909091 L172.318182,76.0909091" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M147.227273,88.6363636 L172.318182,88.6363636" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M147.227273,101.181818 L172.318182,101.181818" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M147.227273,113.727273 L172.318182,113.727273" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M147.227273,126.272727 L172.318182,126.272727" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M147.227273,138.818182 L162.909091,138.818182" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M351.090909,207.5 C350.181818,210.818182 348.363636,210.909091 347.045455,207.5 L326.454545,158.363636 C325.136364,155.181818 326.454545,153.818182 329.863636,155 L379.227273,175.545455 C382.409091,176.909091 382.272727,178.727273 378.954545,179.636364 L363.136364,184.181818 C359.502812,185.396001 356.64469,188.237311 355.409091,191.863636 L351.090909,207.5 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linejoin="round"></path>
+            <circle id="Oval" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="188" cy="204.681818" r="2.63636364"></circle>
+        </g>
+    </g>
+</svg>
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -0,0 +1,8 @@
+// Build CSS
+import '../css/app.css'
+
+// Import JS Modules
+import menu_init from './modules/menu'
+
+// Load Menu Script
+document.addEventListener( 'DOMContentLoaded', menu_init );
--- a/assets/js/modules/menu.js
+++ b/assets/js/modules/menu.js
@ -0,0 +1,30 @@
+export default () => {
+	const toggles = document.querySelectorAll('.toggle')
+	const menu   = document.querySelector('.nav-mobile')
+
+	if ( ! toggles || ! menu ) {
+		return;
+	}
+
+	let active = false
+
+	toggles.forEach(toggle => {
+		toggle.addEventListener( 'click', () => {
+			if ( active ) {
+				open();
+			} else {
+				close();
+			}
+		})
+	})
+
+	function open() {
+		menu.classList.remove('active')
+		active = false
+	}
+
+	function close() {
+		menu.classList.add('active')
+		active = true
+	}
+}
--- a/comments.php
+++ b/comments.php
@ -0,0 +1,82 @@
+<?php
+/**
+ * The template for displaying comments.
+ *
+ * This is the template that displays the area of the page that contains both the current comments
+ * and the comment form.
+ *
+ * @link    https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package Freeshifter
+ */
+
+/*
+ * If the current post is protected by a password and
+ * the visitor has not yet entered the password we will
+ * return early without loading the comments.
+ */
+if ( post_password_required() ) {
+	return;
+}
+?>
+
+<div id="comments" class="comments-area">
+
+	<?php
+	if ( have_comments() ) : ?>
+		<h2 class="comments-title">
+			<?php
+			printf(
+				esc_html( _nx( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'wp-tailwind' ) ),
+				number_format_i18n( get_comments_number() ),
+				'<span>' . get_the_title() . '</span>'
+			);
+			?>
+		</h2>
+
+		<?php
+		if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
+			<nav id="comment-nav-above" class="navigation comment-navigation">
+				<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-tailwind' ); ?></h2>
+				<div class="nav-links">
+					<div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div>
+					<div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div>
+				</div>
+			</nav>
+		<?php
+		endif; ?>
+
+		<ol class="comment-list">
+			<?php
+			wp_list_comments( array(
+				'style'      => 'ol',
+				'short_ping' => true,
+			) ); ?>
+		</ol>
+
+		<?php
+		if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
+			<nav id="comment-nav-below" class="navigation comment-navigation">
+				<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-tailwind' ); ?></h2>
+				<div class="nav-links">
+					<div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div>
+					<div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div>
+				</div>
+			</nav>
+		<?php
+		endif; ?>
+
+	<?php
+	endif; ?>
+
+	<?php
+	// If comments are closed and there are comments, let's leave a little note, shall we?
+	if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
+		?>
+		<p class="no-comments"><?php esc_html( 'Comments are closed.' ); ?></p>
+		<?php
+	endif; ?>
+
+	<?php
+	comment_form(); ?>
+</div>
--- a/content-templates/content-article.php
+++ b/content-templates/content-article.php
@ -0,0 +1,41 @@
+<?php
+/**
+ * The article template.
+ *
+ * @author Freeshifter LLC
+ * @since 1.0.0
+ */
+
+namespace WP_Tailwind;
+
+?>
+<article <?php post_class( 'bg-white border-2 border-gray-400 p-8' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
+	<header>
+		<h2 class="m-0">
+			<?php
+
+			if ( is_archive() || is_home() ) {
+				printf( '<a href="%s" rel="bookmark">%s</a>',
+					esc_url( get_the_permalink() ),
+					esc_html( get_the_title() )
+				);
+			} else {
+				echo get_the_title();
+			} ?>
+		</h2>
+		<p class="text-sm">Published on <?= get_the_date(); ?></p>
+	</header>
+
+	<div class="article">
+		<?php
+		if ( has_post_thumbnail() ) {
+			echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
+		}
+
+		the_content(); ?>
+	</div>
+
+	<footer>
+		Categorized under: <?= get_the_category_list( ',' ); ?>
+	</footer>
+</article>
--- a/footer.php
+++ b/footer.php
@ -0,0 +1,31 @@
+<?php
+/**
+ * The template for displaying the footer.
+ *
+ * Contains the closing of the #content div and all content after.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package Freeshifter
+ */
+
+namespace WP_Tailwind;
+
+?>
+		</main>
+		<footer class="footer relative bg-dark-1 text-light-2 pt-8 pb-16">
+			<div class="relative z-10">
+				<div class="container mx-auto">
+					<div class="lg:flex lg:justify-between">
+						<div class="lg:w-1/4 text-center lg:text-left">
+							<div class="text-xl">
+								<p class="text-sm">WP Tailwind is a utility-first starter theme for WordPress by <a href="https://www.freeshifter.com">Freeshifter LLC</a> and is totally free! <a href="https://www.github.com/freeshifter/wp-tailwind">Contribute on GitHub</a></a></p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</footer>
+		<?php wp_footer(); ?>
+	</body>
+</html>
--- a/functions.php
+++ b/functions.php
@ -0,0 +1,17 @@
+<?php
+/**
+ * Kickoff theme setup and build
+ */
+
+namespace WP_Tailwind;
+
+define( 'WP_Tailwind_VERSION', wp_get_theme()->version );
+define( 'WP_Tailwind_DIR', __DIR__ );
+define( 'WP_Tailwind_URL', get_template_directory_uri() );
+
+try {
+	\A7\autoload( __DIR__ . '/src' );
+} catch ( \Exception $e ) {
+	echo $e->getMessage();
+	die;
+}
--- a/header.php
+++ b/header.php
@ -0,0 +1,67 @@
+<?php
+/**
+ * The header for our theme.
+ *
+ * This is the template that displays all of the <head> section and everything up until <div id="content">
+ *
+ * @link    https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package Freeshifter
+ */
+
+namespace WP_Tailwind;
+
+?><!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="profile" href="http://gmpg.org/xfn/11">
+	<link rel="icon" type="image/png" href="<?= get_stylesheet_directory_uri() . '/assets/images/favicon.png'; ?>">
+	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
+
+	<?php
+	if ( has_nav_menu( 'primary' ) ) {
+		wp_nav_menu( [
+			'items_wrap'      => '<button class="toggle absolute pin-t pin-r mt-4 mr-4 button button-sm">Close</button><ul id="%1$s" class="%2$s">%3$s</ul>',
+			'theme_location'  => 'primary',
+			'container'       => 'nav',
+			'container_class' => 'nav-mobile',
+			'container_id'    => 'mobile-menu',
+			'menu_class'      => 'list-reset m-12'
+		] );
+	}?>
+
+	<header class="header">
+		<div class="container mx-auto">
+			<?php
+			$tag = 'p';
+			if ( is_front_page() || is_home() ) {
+				$tag = 'h1';
+			}
+
+			printf( '<%1$s class="text-h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
+				$tag,
+				esc_url( home_url( '/' ) ),
+				esc_html( get_bloginfo( 'name' ) )
+			);
+
+			if ( has_nav_menu( 'primary' ) ) {
+				wp_nav_menu([
+					'theme_location'  => 'primary',
+					'container'       => 'nav',
+					'container_class' => 'nav-primary ml-auto',
+					'menu_class'      => 'list-reset m-0 md:flex md:justify-end md:items-center'
+				]);
+			} ?>
+			<div class="menu-item">
+				<button class="toggle highlight">Menu</button>
+			</div>
+		</div>
+	</header>
+
+	<main>
--- a/index.php
+++ b/index.php
@ -0,0 +1,31 @@
+<?php
+/**
+ * The default single page template.
+ *
+ * @author Freeshifter LLC
+ * @since 1.0.0
+ */
+
+namespace WP_Tailwind;
+
+get_header(); ?>
+	<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex flex-wrap items-start">
+		<div class="w-full lg:w-4/6 lg:pr-10 mb-8">
+			<?php
+			if ( have_posts() ) {
+				while ( have_posts() ) {
+					the_post();
+					echo get_template_part( 'content-templates/content', 'article' );
+				}
+			} ?>
+		</div>
+		<?php
+		if ( is_active_sidebar( 'sidebar' ) ) : ?>
+			<aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8">
+				<?php dynamic_sidebar( 'sidebar' ); ?>
+			</aside>
+		<?php
+		endif; ?>
+	</div>
+	<?php
+get_footer();
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,54 @@
+{
+	"name": "wp-tailwind-theme",
+	"version": "1.0.0",
+	"description": "WP Tailwind",
+	"main": "./assets/js/main.js",
+	"scripts": {
+		"start": "cross-env NODE_ENV=development SERVER=true webpack --watch",
+		"watch": "cross-env NODE_ENV=development webpack --watch",
+		"dev": "cross-env NODE_ENV=development webpack",
+		"prod": "cross-env NODE_ENV=production webpack",
+		"build": "concurrently \"npm run prod\" \"npm run dev\""
+	},
+	"devDependencies": {
+		"@babel/core": "^7.3.4",
+		"@babel/polyfill": "^7.0.0",
+		"@babel/preset-env": "^7.4.5",
+		"@fullhuman/postcss-purgecss": "^1.1.0",
+		"autoprefixer": "^8.4.1",
+		"babel-loader": "^8.0.4",
+		"browser-sync": "^2.26.5",
+		"browser-sync-webpack-plugin": "^2.0.0",
+		"concurrently": "^3.5.1",
+		"copy-webpack-plugin": "^5.0.3",
+		"cross-env": "^5.2.0",
+		"css-loader": "^2.1.1",
+		"cssnano": "^4.1.10",
+		"imagemin-webpack-plugin": "^2.4.2",
+		"mini-css-extract-plugin": "^0.6.0",
+		"postcss-loader": "^2.1.4",
+		"resolve-url-loader": "^2.3.0",
+		"style-loader": "^0.21.0",
+		"tailwindcss": "^1.0.1",
+		"uglifyjs-webpack-plugin": "^2.1.2",
+		"webpack": "^4.20.2",
+		"webpack-cli": "^3.1.2"
+	},
+	"dependencies": {
+		"postcss-custom-properties": "^8.0.10",
+		"postcss-import": "^12.0.1",
+		"postcss-nested": "^4.1.2",
+		"regenerator": "^0.14.1"
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not ie <= 11"
+	],
+	"engines": {
+		"node": ">=10.5.0",
+		"npm": ">=6.4.1"
+	},
+	"author": "",
+	"license": "ISC"
+}
--- a/page-templates/page-sample.php
+++ b/page-templates/page-sample.php
@ -0,0 +1,4 @@
+<?php
+/**
+ * Nothing here, but where templates should go.
+ */
--- a/screenshot.png
+++ b/screenshot.png
--- a/search.php
+++ b/search.php
@ -0,0 +1,66 @@
+<?php
+/**
+ * The template for displaying search results pages.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
+ *
+ * @package Freeshifter
+ */
+
+get_header(); ?>
+
+<main class="py-8 lg:py-24" style="min-height: 100vh;">
+	<section class="container mx-auto relative z-10">
+		<?php
+		if ( have_posts() ) :
+
+			printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
+				esc_html( get_search_query() )
+			);
+
+			echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
+				while ( have_posts() ) {
+					the_post(); ?>
+					<div class="lg:w-1/3 lg:px-4 mb-8">
+						<article <?php post_class( 'h-full' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
+							<a class="card-link h-full bg-light-2" rel="bookmark" href="<?= esc_url( get_the_permalink() ); ?>">
+								<header>
+									<?php
+									if( has_post_thumbnail() ) {
+										the_post_thumbnail( 'thumbnail', [
+											'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
+										]);
+									}
+									?>
+									<div class="text-left relative z-10">
+										<h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
+										<p class="text-sm italic mt-2">
+											<time class="<?= is_singular('page') ? 'hidden' : ''; ?>" itemprop="datePublished" datetime="<?= get_the_date( 'c' ); ?>">Published on <?= get_the_date( 'F j, Y'); ?></time>
+										</p>
+									</div>
+								</header>
+								<?php
+								printf( '<div class="article text-sm text-left">%s</div>',
+									get_the_excerpt()
+								); ?>
+							</a>
+						</article>
+					</div>
+					<?php
+				}
+			echo '</div>';
+
+			the_posts_navigation();
+
+		else :
+
+			printf( 'Sorry, no results for %s',
+				esc_html( get_search_query() )
+			);
+
+		endif; ?>
+	</section>
+</main>
+
+<?php
+get_footer();
--- a/sidebar.php
+++ b/sidebar.php
@ -0,0 +1,16 @@
+<?php
+/**
+ * The sidebar containing the main widget area.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package Freeshifter
+ */
+
+if ( ! is_active_sidebar( 'sidebar-1' ) ) {
+	return;
+} ?>
+
+<div class="widget-area" role="complementary">
+	<?php dynamic_sidebar( 'sidebar-1' ); ?>
+</div><!-- #secondary -->
--- a/src/classes.php
+++ b/src/classes.php
@ -0,0 +1,23 @@
+<?php
+/**
+ * This file adds functions and actions for classes.
+ *
+ * @author Freeshifter LLC
+ * @since 1.0.0
+ */
+
+namespace WP_Tailwind;
+
+add_filter( 'body_class', function( $classes ) {
+
+	if ( is_singular( ['post', 'page'] ) ) {
+		$classes[] = 'singular';
+	}
+
+	if ( is_front_page() ) {
+		$classes[] = 'front-page';
+	}
+
+	return $classes;
+
+});
--- a/src/enqueue.php
+++ b/src/enqueue.php
@ -0,0 +1,30 @@
+<?php
+
+namespace WP_Tailwind;
+
+/**
+ * Enqueue scripts and styles
+ */
+add_action( 'wp_enqueue_scripts', function() {
+
+	$min_ext = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
+
+	// JS
+	wp_enqueue_script(
+		'wp_tailwind_js',
+		WP_Tailwind_URL . "/dist/main{$min_ext}.js",
+		[],
+		WP_Tailwind_VERSION,
+		true
+	);
+
+	// CSS
+	wp_enqueue_style(
+		'wp_tailwind_css',
+		WP_Tailwind_URL . "/dist/main{$min_ext}.css",
+		[],
+		WP_Tailwind_VERSION,
+		''
+	);
+
+} );
--- a/src/setup.php
+++ b/src/setup.php
@ -0,0 +1,37 @@
+<?php
+
+namespace WP_Tailwind;
+
+/**
+ * Set up theme defaults and registers support for various WordPress features.
+ *
+ * @author Freeshifter LLC
+ * @since 1.0.0
+ */
+add_action( 'after_setup_theme', function () {
+
+	// Add default posts and comments RSS feed links to head.
+	add_theme_support( 'automatic-feed-links' );
+
+	// Let WordPress manage the document title.
+	add_theme_support( 'title-tag' );
+
+	// Enable support for Post Thumbnails on posts and pages.
+	add_theme_support( 'post-thumbnails' );
+
+	// This theme uses wp_nav_menu() in one location.
+	register_nav_menus( [
+		'primary' => __( 'Primary Menu', 'wp-tailwind' ),
+		'footer'  => __( 'Footer Menu', 'wp-tailwind' ),
+	] );
+
+	// Switch default core markup for search form, comment form, and comments to output valid HTML5.
+	add_theme_support( 'html5', [
+		'search-form',
+		'comment-form',
+		'comment-list',
+		'gallery',
+		'caption',
+	] );
+	
+} );
--- a/src/sidebars.php
+++ b/src/sidebars.php
@ -0,0 +1,20 @@
+<?php
+
+namespace WP_Tailwind;
+
+/**
+ * Register widget area.
+ */
+add_action( 'widgets_init', function () {
+
+	register_sidebar( [
+		'name'          => esc_html( 'Sidebar' ),
+		'id'            => 'sidebar',
+		'description'   => '',
+		'before_widget' => '<section id="%1$s" class="widget %2$s">',
+		'after_widget'  => '</section>',
+		'before_title'  => '<h4 class="widget-title">',
+		'after_title'   => '</h4>',
+	] );
+
+} );
--- a/style.css
+++ b/style.css
@ -0,0 +1,10 @@
+/**
+ * Theme Name: WP Tailwind
+ * Theme URI: https://github.com/freeshifter/wp-tailwind
+ * Author: Freeshifter LLC
+ * Author URI: https://www.freeshifter.com
+ * Version: 1.0.0
+ * License: GNU General Public License v2 or later
+ * License URI: http://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain: wp-tailwind
+ */
--- a/tailwind.js
+++ b/tailwind.js
@ -0,0 +1,396 @@
+module.exports = {
+	prefix: '',
+	important: false,
+	separator: ':',
+	theme: {
+		screens: {
+			sm: '640px',
+			md: '768px',
+			lg: '1024px',
+			xl: '1280px',
+			retina: {
+				'min-resolution': '192dpi'
+			}
+		},
+		colors: {
+			transparent: 'transparent',
+
+			black: '#000',
+			white: '#fff',
+
+			gray: {
+				100: '#f7fafc',
+				200: '#edf2f7',
+				300: '#e2e8f0',
+				400: '#cbd5e0',
+				500: '#a0aec0',
+				600: '#718096',
+				700: '#4a5568',
+				800: '#2d3748',
+				900: '#1a202c',
+			},
+			primary: {
+				100: '#DB3A34',
+				200: '#CC3630'
+			}
+		},
+		spacing: {
+			px: '1px',
+			'0': '0',
+			'1': '0.25rem',
+			'2': '0.5rem',
+			'3': '0.75rem',
+			'4': '1rem',
+			'5': '1.25rem',
+			'6': '1.5rem',
+			'8': '2rem',
+			'10': '2.5rem',
+			'12': '3rem',
+			'16': '4rem',
+			'20': '5rem',
+			'24': '6rem',
+			'32': '8rem',
+			'40': '10rem',
+			'48': '12rem',
+			'56': '14rem',
+			'64': '16rem',
+		},
+		backgroundColor: theme => theme('colors'),
+		backgroundPosition: {
+			bottom: 'bottom',
+			center: 'center',
+			left: 'left',
+			'left-bottom': 'left bottom',
+			'left-top': 'left top',
+			right: 'right',
+			'right-bottom': 'right bottom',
+			'right-top': 'right top',
+			top: 'top',
+		},
+		backgroundSize: {
+			auto: 'auto',
+			cover: 'cover',
+			contain: 'contain',
+		},
+		borderColor: theme => ({
+			...theme('colors'),
+			default: theme('colors.gray.300', 'currentColor'),
+		}),
+		borderRadius: {
+			none: '0',
+			sm: '0.125rem',
+			default: '0.25rem',
+			lg: '0.5rem',
+			full: '9999px',
+		},
+		borderWidth: {
+			default: '1px',
+			'0': '0',
+			'2': '2px',
+			'4': '4px',
+			'8': '8px',
+		},
+		boxShadow: {
+			default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+			md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+			lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+			xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+			'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+			inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+			outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+			none: 'none',
+		},
+		container: {},
+		cursor: {
+			auto: 'auto',
+			default: 'default',
+			pointer: 'pointer',
+			wait: 'wait',
+			text: 'text',
+			move: 'move',
+			'not-allowed': 'not-allowed',
+		},
+		fill: {
+			current: 'currentColor',
+		},
+		flex: {
+			'1': '1 1 0%',
+			auto: '1 1 auto',
+			initial: '0 1 auto',
+			none: 'none',
+		},
+		flexGrow: {
+			'0': '0',
+			default: '1',
+		},
+		flexShrink: {
+			'0': '0',
+			default: '1',
+		},
+		fontFamily: {
+			sans: [
+				'-apple-system',
+				'BlinkMacSystemFont',
+				'"Segoe UI"',
+				'Roboto',
+				'"Helvetica Neue"',
+				'Arial',
+				'"Noto Sans"',
+				'sans-serif',
+				'"Apple Color Emoji"',
+				'"Segoe UI Emoji"',
+				'"Segoe UI Symbol"',
+				'"Noto Color Emoji"',
+			],
+			serif: [
+				'Georgia',
+				'Cambria',
+				'"Times New Roman"',
+				'Times',
+				'serif',
+			],
+			mono: [
+				'Menlo',
+				'Monaco',
+				'Consolas',
+				'"Liberation Mono"',
+				'"Courier New"',
+				'monospace',
+			],
+		},
+		fontSize: {
+			xs: '0.75rem',
+			sm: '0.875rem',
+			base: '1rem',
+			lg: '1.125rem',
+			xl: '1.25rem',
+			'2xl': '1.5rem',
+			'3xl': '1.875rem',
+			'4xl': '2.25rem',
+			'5xl': '3rem',
+			'6xl': '4rem',
+		},
+		fontWeight: {
+			hairline: '100',
+			thin: '200',
+			light: '300',
+			normal: '400',
+			medium: '500',
+			semibold: '600',
+			bold: '700',
+			extrabold: '800',
+			black: '900',
+		},
+		height: theme => ({
+			auto: 'auto',
+			...theme('spacing'),
+			full: '100%',
+			screen: '100vh',
+		}),
+		inset: {
+			'0': '0',
+			auto: 'auto',
+		},
+		letterSpacing: {
+			tighter: '-0.05em',
+			tight: '-0.025em',
+			normal: '0',
+			wide: '0.025em',
+			wider: '0.05em',
+			widest: '0.1em',
+		},
+		lineHeight: {
+			none: '1',
+			tight: '1.25',
+			snug: '1.375',
+			normal: '1.5',
+			relaxed: '1.625',
+			loose: '2',
+		},
+		listStyleType: {
+			none: 'none',
+			disc: 'disc',
+			decimal: 'decimal',
+		},
+		margin: (theme, { negative }) => ({
+			auto: 'auto',
+			...theme('spacing'),
+			...negative(theme('spacing')),
+		}),
+		maxHeight: {
+			full: '100%',
+			screen: '100vh',
+		},
+		maxWidth: {
+			xs: '20rem',
+			sm: '24rem',
+			md: '28rem',
+			lg: '32rem',
+			xl: '36rem',
+			'2xl': '42rem',
+			'3xl': '48rem',
+			'4xl': '56rem',
+			'5xl': '64rem',
+			'6xl': '72rem',
+			full: '100%',
+		},
+		minHeight: {
+			'0': '0',
+			full: '100%',
+			screen: '100vh',
+		},
+		minWidth: {
+			'0': '0',
+			full: '100%',
+		},
+		objectPosition: {
+			bottom: 'bottom',
+			center: 'center',
+			left: 'left',
+			'left-bottom': 'left bottom',
+			'left-top': 'left top',
+			right: 'right',
+			'right-bottom': 'right bottom',
+			'right-top': 'right top',
+			top: 'top',
+		},
+		opacity: {
+			'0': '0',
+			'25': '0.25',
+			'50': '0.5',
+			'75': '0.75',
+			'100': '1',
+		},
+		order: {
+			first: '-9999',
+			last: '9999',
+			none: '0',
+			'1': '1',
+			'2': '2',
+			'3': '3',
+			'4': '4',
+			'5': '5',
+			'6': '6',
+			'7': '7',
+			'8': '8',
+			'9': '9',
+			'10': '10',
+			'11': '11',
+			'12': '12',
+		},
+		padding: theme => theme('spacing'),
+		stroke: {
+			current: 'currentColor',
+		},
+		textColor: theme => theme('colors'),
+		width: theme => ({
+			auto: 'auto',
+			...theme('spacing'),
+			'1/2': '50%',
+			'1/3': '33.33333%',
+			'2/3': '66.66667%',
+			'1/4': '25%',
+			'2/4': '50%',
+			'3/4': '75%',
+			'1/5': '20%',
+			'2/5': '40%',
+			'3/5': '60%',
+			'4/5': '80%',
+			'1/6': '16.66667%',
+			'2/6': '33.33333%',
+			'3/6': '50%',
+			'4/6': '66.66667%',
+			'5/6': '83.33333%',
+			'1/12': '8.33333%',
+			'2/12': '16.66667%',
+			'3/12': '25%',
+			'4/12': '33.33333%',
+			'5/12': '41.66667%',
+			'6/12': '50%',
+			'7/12': '58.33333%',
+			'8/12': '66.66667%',
+			'9/12': '75%',
+			'10/12': '83.33333%',
+			'11/12': '91.66667%',
+			full: '100%',
+			screen: '100vw',
+		}),
+		zIndex: {
+			auto: 'auto',
+			'0': '0',
+			'10': '10',
+			'20': '20',
+			'30': '30',
+			'40': '40',
+			'50': '50',
+		},
+	},
+	variants: {
+		alignContent: ['responsive'],
+		alignItems: ['responsive'],
+		alignSelf: ['responsive'],
+		appearance: ['responsive'],
+		backgroundAttachment: ['responsive'],
+		backgroundColor: ['responsive', 'hover', 'focus'],
+		backgroundPosition: ['responsive'],
+		backgroundRepeat: ['responsive'],
+		backgroundSize: ['responsive'],
+		borderCollapse: ['responsive'],
+		borderColor: ['responsive', 'hover', 'focus'],
+		borderRadius: ['responsive'],
+		borderStyle: ['responsive'],
+		borderWidth: ['responsive'],
+		boxShadow: ['responsive', 'hover', 'focus'],
+		cursor: ['responsive'],
+		display: ['responsive'],
+		fill: ['responsive'],
+		flex: ['responsive'],
+		flexDirection: ['responsive'],
+		flexGrow: ['responsive'],
+		flexShrink: ['responsive'],
+		flexWrap: ['responsive'],
+		float: ['responsive'],
+		fontFamily: ['responsive'],
+		fontSize: ['responsive'],
+		fontSmoothing: ['responsive'],
+		fontStyle: ['responsive'],
+		fontWeight: ['responsive', 'hover', 'focus'],
+		height: ['responsive'],
+		inset: ['responsive'],
+		justifyContent: ['responsive'],
+		letterSpacing: ['responsive'],
+		lineHeight: ['responsive'],
+		listStylePosition: ['responsive'],
+		listStyleType: ['responsive'],
+		margin: ['responsive'],
+		maxHeight: ['responsive'],
+		maxWidth: ['responsive'],
+		minHeight: ['responsive'],
+		minWidth: ['responsive'],
+		objectFit: ['responsive'],
+		objectPosition: ['responsive'],
+		opacity: ['responsive'],
+		order: ['responsive'],
+		outline: ['responsive', 'focus'],
+		overflow: ['responsive'],
+		padding: ['responsive'],
+		pointerEvents: ['responsive'],
+		position: ['responsive'],
+		resize: ['responsive'],
+		stroke: ['responsive'],
+		tableLayout: ['responsive'],
+		textAlign: ['responsive'],
+		textColor: ['responsive', 'hover', 'focus'],
+		textDecoration: ['responsive', 'hover', 'focus'],
+		textTransform: ['responsive'],
+		userSelect: ['responsive'],
+		verticalAlign: ['responsive'],
+		visibility: ['responsive'],
+		whitespace: ['responsive'],
+		width: ['responsive'],
+		wordBreak: ['responsive'],
+		zIndex: ['responsive'],
+	},
+	corePlugins: {},
+	plugins: [],
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,183 @@
+const path                 = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin    = require('copy-webpack-plugin');
+const ImageminPlugin       = require('imagemin-webpack-plugin').default;
+const BrowserSyncPlugin    = require('browser-sync-webpack-plugin');
+const PurgeCSS             = require('@fullhuman/postcss-purgecss');
+const UglifyJsPlugin       = require("uglifyjs-webpack-plugin");
+const isProduction         = 'production' === process.env.NODE_ENV;
+
+// Set the build prefix.
+let prefix = isProduction ? '.min' : '';
+
+// Set the PostCSS Plugins.
+const post_css_plugins = [
+	require('postcss-import'),
+	require('tailwindcss')('./tailwind.js'),
+	require('postcss-nested'),
+	require('postcss-custom-properties'),
+	require('autoprefixer')
+]
+
+// Add PurgeCSS for production builds.
+if ( isProduction ) {
+	post_css_plugins.push(require('cssnano'));
+	post_css_plugins.push(
+		PurgeCSS({
+			content: [
+				'./*.php',
+				'./src/**/*.php',
+				'./page-templates/*.php',
+				'./assets/images/**/*.svg',
+				'./assets/scss/whitelist/*.css',
+				'./../../mu-plugins/app/src/components/**/*.php',
+			],
+			css: [
+				'./node_modules/tailwindcss/dist/base.css'
+			],
+			extractors: [
+				{
+					extractor: class TailwindExtractor {
+						static extract(content) {
+							return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
+						}
+					},
+					extensions: ['php', 'js', 'svg', 'css',]
+				}
+			],
+			whitelistPatterns: getCSSWhitelistPatterns()
+		})
+	)
+}
+
+const config = {
+	entry: './assets/js/main.js',
+	optimization: {
+		minimizer: [
+			new UglifyJsPlugin({
+				cache: true,
+				parallel: true,
+				sourceMap: true
+			})
+		]
+	},
+	output: {
+		filename: `[name]${prefix}.js`,
+		path: path.resolve(__dirname, 'dist')
+	},
+	mode: process.env.NODE_ENV,
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				options: {
+					presets: [
+						[
+							"@babel/preset-env"
+						]
+					]
+				}
+			},
+			{
+				test: /\.css$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: 'css-loader',
+						options: {
+							importLoaders: 1,
+							context: 'postcss',
+							sourceMap: ! isProduction
+						}
+					},
+					{
+						loader: 'postcss-loader',
+						options: {
+							ident: 'postcss',
+							sourceMap: isProduction || 'inline',
+							plugins: post_css_plugins,
+						},
+					}
+				],
+			}
+		]
+	},
+	resolve: {
+		alias: {
+			'@'      : path.resolve('assets'),
+			'@images': path.resolve('../images')
+		}
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: `[name]${prefix}.css`,
+		}),
+		new CopyWebpackPlugin([{
+			from: './assets/images/',
+			to: 'images',
+			ignore: [
+				'.DS_Store'
+			]
+		}]),
+		new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
+	]
+}
+
+// Fire up a local server if requested
+if (process.env.SERVER) {
+	config.plugins.push(
+		new BrowserSyncPlugin(
+			{
+				proxy: 'https://example.dev',
+				files: [
+					'**/*.php',
+					'**/*.scss'
+				],
+				port: 3000,
+				notify: false,
+			}
+		)
+	)
+}
+
+/**
+ * List of RegExp patterns for PurgeCSS
+ * @returns {RegExp[]}
+ */
+function getCSSWhitelistPatterns() {
+	return [
+		/^home(-.*)?$/,
+		/^blog(-.*)?$/,
+		/^archive(-.*)?$/,
+		/^date(-.*)?$/,
+		/^error404(-.*)?$/,
+		/^admin-bar(-.*)?$/,
+		/^search(-.*)?$/,
+		/^nav(-.*)?$/,
+		/^wp(-.*)?$/,
+		/^screen(-.*)?$/,
+		/^navigation(-.*)?$/,
+		/^(.*)-template(-.*)?$/,
+		/^(.*)?-?single(-.*)?$/,
+		/^postid-(.*)?$/,
+		/^post-(.*)?$/,
+		/^attachmentid-(.*)?$/,
+		/^attachment(-.*)?$/,
+		/^page(-.*)?$/,
+		/^(post-type-)?archive(-.*)?$/,
+		/^author(-.*)?$/,
+		/^category(-.*)?$/,
+		/^tag(-.*)?$/,
+		/^menu(-.*)?$/,
+		/^tags(-.*)?$/,
+		/^tax-(.*)?$/,
+		/^term-(.*)?$/,
+		/^date-(.*)?$/,
+		/^(.*)?-?paged(-.*)?$/,
+		/^depth(-.*)?$/,
+		/^children(-.*)?$/,
+	];
+}
+
+module.exports = config