init(15): registering fonts with tailwind

15-multi-step-form/src/input.css

@@ -6,6 +6,28 @@ html {
     font-size: 16px;
 }
 
+/* path is relative to 'out.css' */
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
+  font-weight: 400; /* Regular */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('fonts/Ubuntu-Medium.ttf') format('truetype');
+  font-weight: 600; /* Semibold */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('fonts/Ubuntu-Bold.ttf') format('truetype');
+  font-weight: 700; /* Bold */
+  font-style: normal;
+}
+
 div, p, button, ol, li, summary {
     outline: 1px solid red;
 }

15-multi-step-form/src/main/resources/public/out.css

@@ -44,7 +44,7 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -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";
+  font-family: Ubuntu, sans-serif;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -522,9 +522,127 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.bg-amber-200 {
+.fixed {
-  --tw-bg-opacity: 1;
+  position: fixed;
-  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.-mt-20 {
+  margin-top: -5rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-44 {
+  height: 11rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.place-content-center {
+  place-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.gap-x-5 {
+  -moz-column-gap: 1.25rem;
+       column-gap: 1.25rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
 .bg-green-200 {
@@ -532,7 +650,109 @@ video {
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
 
+.bg-light-gray {
+  --tw-bg-opacity: 1;
+  background-color: hsl(229 24% 87% / var(--tw-bg-opacity));
+}
+
+.bg-marine-blue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(213 96% 18% / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-sidebar-mobile {
+  background-image: url("images/bg-sidebar-mobile.svg");
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+html {
+  font-size: 16px;
+}
+
+/* path is relative to 'out.css' */
+
+@font-face {
+  font-family: 'Ubuntu';
+
+  src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
+
+  font-weight: 400;
+
+  /* Regular */
+
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+
+  src: url('fonts/Ubuntu-Medium.ttf') format('truetype');
+
+  font-weight: 600;
+
+  /* Semibold */
+
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+
+  src: url('fonts/Ubuntu-Bold.ttf') format('truetype');
+
+  font-weight: 700;
+
+  /* Bold */
+
+  font-style: normal;
+}
+
+div, p, button, ol, li, summary {
+  outline: 1px solid red;
+}
+
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:h-\[570px\] {
+    height: 570px;
+  }
+
+  .md\:w-\[280px\] {
+    width: 280px;
+  }
+
+  .md\:bg-sidebar-desktop {
+    background-image: url("images/bg-sidebar-desktop.svg");
+  }
+}

15-multi-step-form/tailwind.config.js

@@ -21,6 +21,14 @@ module.exports = {
         'sidebar-mobile': 'url("images/bg-sidebar-mobile.svg")',
         'sidebar-desktop': 'url("images/bg-sidebar-desktop.svg")',
       },
+      fontFamily: {
+        'sans': ['Ubuntu', 'sans-serif'], // This will set Roboto as the default sans font
+      },
+      fontWeight: {
+        'normal': 400,
+        'semibold': 600,
+        'bold': 700,
+      },
     },
   },
   plugins: [],