css: refactor CSS to use Tailwind-style utility classes.

Refactor CSS to use standard Tailwind-style utility classes instead of
ad-hoc rules. This eliminates a lot of single-purpose rules for specific
UI elements and standardizes margins to be more consistent throughout
the site.

Utility classes are defined manually on an as-needed basis instead of
importing Tailwind as a whole. Naming conventions mostly follow
Tailwind's conventions, otherwise they follow Bootstrap.

* https://tailwindcss.com/docs/
* https://getbootstrap.com/docs/5.0/utilities/spacing/

app/javascript/src/styles/common/main_layout.scss

@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div#page {
   overflow: visible;
   margin: 0 20px;

app/javascript/src/styles/common/tables.scss

@@ -13,17 +13,12 @@ table.striped {
     }
   }
 
-  .number, .links {
-    text-align: right;
-  }
-
   thead {
     tr {
       border-bottom: var(--table-header-border);
     }
 
     th {
-      font-weight: bold;
       text-align: left;
     }
   }
@@ -72,3 +67,11 @@ table.search, table.aligned-vertical {
 table.aligned-vertical {
   height: 1.75em;
 }
+
+table.table-sm {
+  th, td { padding: 0.25rem; }
+}
+
+table.table-md {
+  th, td { padding: 0.5rem; }
+}

app/javascript/src/styles/common/utilities.scss

@@ -0,0 +1,48 @@
+// A small set of utility classes, modeled after TailwindCSS and Bootstrap.
+//
+// https://tailwindcss.com/docs
+// https://getbootstrap.com/docs/5.0/utilities/spacing/
+
+$spacer: 0.25rem; /* 4px */
+
+.font-monospace { font-family: var(--monospace-font); }
+.font-bold { font-weight: bold; }
+
+.inline-block { display: inline-block; }
+.flex { display: flex; }
+
+.text-center { text-align: center; }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mx-2    { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
+
+.mt-2  { margin-top: 2 * $spacer; }
+.mt-4  { margin-top: 4 * $spacer; }
+
+.mb-2  { margin-bottom: 2 * $spacer; }
+.mb-4  { margin-bottom: 4 * $spacer; }
+
+.ml-4  { margin-left: 4 * $spacer; }
+
+.p-4  { padding: 4 * $spacer; }
+
+.w-1\/4 { width: 25%; }
+.w-full { width: 100%; }
+
+.h-10 { height: 10 * $spacer; }
+
+.space-x-4 > * + * { margin-left: 4 * $spacer; }
+.space-y-4 > * + * { margin-top: 4 * $spacer; }
+
+.align-top { vertical-align: top; }
+
+.flex-auto { flex: 1 1 auto; }
+.items-center { align-items: center; }
+
+@media screen and (min-width: 660px) {
+  .md\:inline-block { display: inline-block; }
+  .md\:flex { display: flex; }
+
+  .md\:space-x-8 > * + * { margin-left: 8 * $spacer; }
+  .md\:space-y-0 > * + * { margin-top: 0; }
+}