✨feature: Set up Tailwind and automate dev process to watch all files for changes and rebuild as needed

css/global.css

@@ -0,0 +1,84 @@
+/* Miscellaneous custom styles */
+@theme {
+  --spacing-menu-top:     calc(100% + .9375rem);
+  --spacing-section:      2rem;
+
+  --shadow-menu-shadow:   0 .25rem .375rem rgba(0,0,0,0.1);
+
+  /** Breakpoints
+   * The breakpoints are set to match the default Tailwind breakpoints.
+   * You can override them here if you want to use different breakpoints.
+   *
+   * @see https://tailwindcss.com/docs/breakpoints
+   */
+  --breakpoint-*:   initial;
+  --breakpoint-xxs: 22.5rem;    /* 360px */
+  --breakpoint-xs:  29.6875rem; /* 475px */
+  --breakpoint-sm:  40rem;      /* 640px */
+  --breakpoint-md:  48rem;      /* 768px */
+  --breakpoint-lg:  64rem;      /* 1024px */
+  --breakpoint-xl:  80rem;      /* 1280px */
+  --breakpoint-2xl: 96rem;      /* 1536px */
+}
+
+/* Basic layout styles */
+body, html {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.section {
+  @apply relative my-section px-section;
+
+  &:first-child {
+    @apply mt-0;
+  }
+
+  &:last-child, p:last-child {
+    @apply mb-0;
+  }
+
+  &.has-background {
+    @apply py-section bg-cover bg-no-repeat;
+  }
+}
+
+/** Allows containers inside containers
+  *
+  * .container .wp-block-section {
+  * @apply mx-break-out;
+  * }
+  */
+
+.content-wrapper {
+  .alignfull {
+    @apply max-w-full;
+  }
+
+  .alignwide {
+    @apply max-w-full;
+  }
+
+  .alignleft {
+    @apply ml-0 mr-auto float-none;
+  }
+
+  .alignright {
+    @apply ml-auto mr-0 float-none;
+  }
+
+  .aligncenter {
+    @apply mx-auto;
+  }
+}
+
+/* Responsive embeds */
+.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
+.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }