Tailwind Build Process Changes

3 files changed, 112 insertions, 91 deletions

diff --git a/package.json b/package.json
index abccb36..d1b3bba 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,11 @@
   "scripts": {
     "tailwind:process": "npx postcss src/css/styles.css --o src/_includes/assets/css/styles.css --watch",
     "tailwind:build": "npx postcss src/css/styles.css --o src/_includes/assets/css/styles.css",
-    "serve": "eleventy --serve",
-    "eleventy": "eleventy",
+    "serve": "npx @11ty/eleventy --serve",
+    "eleventy": "npx @11ty/eleventy",
     "start": "concurrently \"npm run tailwind:process\" \"npm run serve\"",
-    "build": "npm run tailwindcli:build && npm run eleventy",
-    "tailwindcli:build": "npx tailwindcss -i src/css/styles.css -o src/_includes/assets/css/styles.css"
+    "build": "concurrently \"npm run tailwindcli:build\" \"npm run eleventy\"",
+    "tailwindcli:build": "npx tailwindcss -i ./src/css/styles.css -o ./src/_includes/assets/css/styles.css"
   },
   "keywords": [],
   "author": "",
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index 0edf646..e9d5227 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -544,12 +544,12 @@ video {
 .visible {
   visibility: visible;
 }
-.invisible {
-  visibility: hidden;
-}
 .absolute {
   position: absolute;
 }
+.relative {
+  position: relative;
+}
 .right-0 {
   right: 0px;
 }
@@ -559,6 +559,14 @@ video {
 .m-4 {
   margin: 1rem;
 }
+.-my-8 {
+  margin-top: -2rem;
+  margin-bottom: -2rem;
+}
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -571,20 +579,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.-my-8 {
-  margin-top: -2rem;
-  margin-bottom: -2rem;
-}
-.mx-6 {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
-.mt-2 {
-  margin-top: 0.5rem;
-}
-.mt-3 {
-  margin-top: 0.75rem;
-}
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -594,6 +588,9 @@ video {
 .mr-5 {
   margin-right: 1.25rem;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -603,17 +600,29 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
-.mt-5 {
-  margin-top: 1.25rem;
-}
 .mt-auto {
   margin-top: auto;
 }
+.ml-auto {
+  margin-left: auto;
+}
+.mt-5 {
+  margin-top: 1.25rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
-.ml-auto {
-  margin-left: auto;
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.ml-0 {
+  margin-left: 0px;
+}
+.mr-0 {
+  margin-right: 0px;
+}
+.mt-0 {
+  margin-top: 0px;
 }
 .block {
   display: block;
@@ -624,21 +633,36 @@ video {
 .flex {
   display: flex;
 }
+.table {
+  display: table;
+}
+.contents {
+  display: contents;
+}
 .hidden {
   display: none;
 }
-.h-48 {
-  height: 12rem;
-}
 .h-screen {
   height: 100vh;
 }
+.h-48 {
+  height: 12rem;
+}
 .w-full {
   width: 100%;
 }
 .max-w-5xl {
   max-width: 64rem;
 }
+.border-collapse {
+  border-collapse: collapse;
+}
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.resize {
+  resize: both;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -669,6 +693,13 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
+.border {
+  border-width: 1px;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .bg-yellow-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
@@ -677,53 +708,52 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(168 85 247 / var(--tw-bg-opacity));
 }
-.bg-violet-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(109 40 217 / var(--tw-bg-opacity));
-}
 .bg-sky-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 105 161 / var(--tw-bg-opacity));
 }
-.bg-purple-700 {
+.bg-violet-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
+  background-color: rgb(109 40 217 / var(--tw-bg-opacity));
 }
-.bg-black {
+.bg-purple-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
 }
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
-.p-2 {
-  padding: 0.5rem;
-}
 .p-3 {
   padding: 0.75rem;
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-6 {
   padding: 1.5rem;
 }
 .p-8 {
   padding: 2rem;
 }
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.p-10 {
+  padding: 2.5rem;
 }
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 .pl-2 {
   padding-left: 0.5rem;
@@ -740,14 +770,14 @@ video {
 .font-supply-regular {
   font-family: supplyRegular, sans-serif;
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -765,6 +795,17 @@ video {
 .font-medium {
   font-weight: 500;
 }
+.italic {
+  font-style: italic;
+}
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -773,10 +814,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -785,15 +822,18 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-yellow-500 {
-  --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity));
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
 }
 .shadow-\[5px_5px_0px_0px_rgba\(0\2c 0\2c 0\2c 255\)\] {
   --tw-shadow: 5px 5px 0px 0px rgba(0,0,0,255);
   --tw-shadow-colored: 5px 5px 0px 0px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.outline {
+  outline-style: solid;
+}
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -948,34 +988,18 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
-.hover\:text-black:hover {
+.hover\:text-white:hover {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-white:hover {
+.hover\:text-black:hover {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
 @media (min-width: 768px) {
 
-  .md\:visible {
-    visibility: visible;
-  }
-
-  .md\:invisible {
-    visibility: hidden;
-  }
-
-  .md\:absolute {
-    position: absolute;
-  }
-
-  .md\:relative {
-    position: relative;
-  }
-
   .md\:ml-0 {
     margin-left: 0px;
   }
@@ -984,10 +1008,6 @@ pre[class*="language-"] {
     margin-right: 0px;
   }
 
-  .md\:mt-5 {
-    margin-top: 1.25rem;
-  }
-
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -996,10 +1016,6 @@ pre[class*="language-"] {
     margin-top: auto;
   }
 
-  .md\:block {
-    display: block;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -1025,13 +1041,13 @@ pre[class*="language-"] {
     line-height: 1.75rem;
   }
 
-  .md\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index d37100c..a7918cf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{njk,md}", "./src/**/*.svg"],
+  content: [
+    "./src/**/*.{njk,md}",
+    "./src/**/*.svg",
+    "./src/_includes/assets/css/*.css",
+    "./public/index.html"
+  ],
   theme: {
     extend: {
       fontFamily: {