replace tailwind with bootstrap: initial webpack config for development

README.md

@@ -1,5 +1,5 @@
-# WordPress Tailwind Starter Theme
+# 73k WordPress Bootstrap 5/PurgeCSS Theme
-A minimalistic WordPress starter theme, based on Tailwind and PurgeCSS.
+The WordPress theme for 73k.us, based on Bootstrap 5 and PurgeCSS.
 
 ## Requirements
 - [NodeJS](https://nodejs.org)
@@ -25,8 +25,8 @@ 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
+## Bootstrap
-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/).
+You can customize Bootstrap SCSS & JavaScript imports in the `assets/css/app.scss` and `assets/js/main.js` files.
 
 ## 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.**
+*WP 73k* 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.**

TODO.md

@@ -4,8 +4,10 @@
 - [X] ~~*rebrand*~~ [2021-07-02]
 - [X] ~~*initial updating of node modules/webpack*~~ [2021-07-02]
 - [ ] replace tailwind with bootstrap
-- [ ] reconfigure purgecss/postcss to ensure it's working
+  - [ ] initial webpack config for development
-- [ ] confirm node modules / webpack config
+  - [ ] pore through template files to update theming
+  - [ ] purgecss/webpack config for production
+- [ ] double-check npm run build output to ensure it's all working
 - [ ] add font handling if possible
 - [ ] add svg sprite handling if possible
 - [ ] ...

assets/css/app.scss

@@ -1,13 +1 @@
-// @import "tailwindcss/base";
-// @import "tailwindcss/components";
-// @import "tailwindcss/utilities";
-// @import "whitelist/whitelist.css";
-// @import "conditional/conditional.css";
-
-// /* Fonts */
-// @import "fonts";
-
-// /* Load Bootstrap v5 and customizations */
-// @import "bs-load";
-
 @import "../../node_modules/bootstrap/scss/bootstrap.scss"

assets/css/conditional/article.css

@@ -1,41 +0,0 @@
-.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;
-		}
-	}
-}

assets/css/conditional/conditional.css

@@ -1,2 +0,0 @@
-@import "header";
-@import "article";

assets/css/conditional/header.css

@@ -1,12 +0,0 @@
-.header {
-	@apply py-2 z-10 bg-gray-100;
-
-	@screen lg {
-		@apply py-6;
-	}
-
-	.container {
-		@apply flex justify-between items-center;
-	}
-}
-

assets/css/whitelist/buttons.css

@@ -1,55 +0,0 @@
-.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;
-	}
-}

assets/css/whitelist/forms.css

@@ -1,44 +0,0 @@
-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;
-	}
-}

assets/css/whitelist/icons.css

@@ -1,17 +0,0 @@
-.svg-icon {
-	width: 1em;
-	height: 1em;
-
-	path,
-	polygon,
-	rect {
-		@apply fill-current;
-	}
-
-	circle {
-		@apply stroke-current;
-		stroke-width: 1;
-	}
-}
-
-

assets/css/whitelist/navigation.css

@@ -1,113 +0,0 @@
-.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;
-	}
-}

assets/css/whitelist/transitions.css

@@ -1,13 +0,0 @@
-.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;
-}

assets/css/whitelist/type.css

@@ -1,111 +0,0 @@
-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;
-}

assets/css/whitelist/whitelist.css

@@ -1,7 +0,0 @@
-@import "type.css";
-@import "navigation.css";
-@import "buttons.css";
-@import "transitions.css";
-@import "icons.css";
-@import "forms.css";
-@import "wordpress.css";

assets/css/whitelist/wordpress.css

@@ -1,28 +0,0 @@
-.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;
-}

package.json

@@ -45,7 +45,6 @@
     "postcss-scss": "^3.0.4",
     "sass": "^1.x",
     "sass-loader": "^12.x",
-		"tailwindcss": "^1.5.2",
     "webpack": "^5.x",
     "webpack-cli": "^4.x"
 	},

webpack.config.js

@@ -13,7 +13,6 @@ 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')
@@ -28,12 +27,8 @@ if ( isProduction ) {
 				'./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'
-			// ],
 			// Use Extractor configuration from Tailwind Docs
 			// https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually
 			defaultExtractor: content => {