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/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; }
+}