ditch boostrap and use tailwind instead

styles/index.css

@@ -0,0 +1,92 @@
+@tailwind base;
+
+/* Write your own custom base styles here */
+
+/* Start purging... */
+@tailwind components;
+/* Stop purging. */
+
+/* Start purging... */
+@tailwind utilities;
+/* Stop purging. */
+
+/* Your own custom utilities */
+
+.fsw {
+  @apply flex flex-wrap -mx-3 mb-2;
+}
+
+.fs {
+  @apply w-full px-3 mb-2;
+}
+
+.flabel {
+  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
+}
+
+.input-text {
+  @apply appearance-none block bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight;
+}
+
+.input-text:disabled {
+  @apply bg-gray-300 cursor-not-allowed;
+}
+
+.input-text:focus {
+  @apply outline-none bg-white;
+}
+
+.input-text.input-changed:invalid {
+  @apply border-red-500;
+}
+
+.btn {
+  @apply font-bold py-2 px-4 rounded mx-2;
+}
+
+.btn:first-child {
+  @apply ml-0;
+}
+
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+
+.btn-blue:hover {
+  @apply bg-blue-700;
+}
+
+.btn-gray {
+  @apply bg-gray-500 text-white;
+}
+
+.btn-gray:hover {
+  @apply bg-gray-700;
+}
+
+/*@screen md {
+  .fs {
+    @apply w-1/2 mb-0;
+  }
+}*/
+
+.datepicker
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  background-color: #f0f8ff !important;
+  color: #4a90e2;
+}
+.datepicker .DayPicker-Day {
+  border-radius: 0 !important;
+}
+.datepicker .DayPicker-Day--start {
+  border-top-left-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+.datepicker .DayPicker-Day--end {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+}
+.datepicker .DayPicker-Day--dayBooked:not(.DayPicker-Day--outside) {
+  color: #505050;
+  background-color: #fcc;
+}