feat: add Tailwind CSS via its own CLI

tailwind/_base.css

@@ -0,0 +1,49 @@
+/* lato-regular - latin */
+@font-face {
+    font-display: swap;
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2');
+}
+/* lato-italic - latin */
+@font-face {
+    font-display: swap;
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/lato-v24-latin-italic.woff2') format('woff2');
+}
+/* lato-700 - latin */
+@font-face {
+    font-display: swap;
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/lato-v24-latin-700.woff2') format('woff2');
+}
+/* lato-900 - latin */
+@font-face {
+    font-display: swap;
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 900;
+    src: url('../fonts/lato-v24-latin-900.woff2') format('woff2');
+}
+
+/* These url()s are NOT relative to this file. postcss-import inlines this partial verbatim
+   and Tailwind's CLI does not rebase urls, so they are resolved by the browser relative to
+   the OUTPUT file, assets/styles/app.css -- which is what makes ../fonts/ correct.
+   AssetMapper then rewrites them to versioned paths when it compiles assets/styles/app.css. */
+
+/* htmx indicator visibility. app.js sets htmx.config.includeIndicatorStyles = false, so htmx
+   injects no <style> block of its own -- these three rules are what replaces it. */
+.htmx-indicator {
+    @apply invisible;
+}
+.htmx-request .htmx-indicator {
+    @apply visible;
+}
+.htmx-request.htmx-indicator {
+    @apply visible;
+}

tailwind/_components.css

@@ -0,0 +1,4 @@
+@import "components/typography.css";
+@import "components/button.css";
+@import "components/forms.css";
+@import "components/badge.css";

tailwind/_utilities.css

@@ -0,0 +1,7 @@
+@layer utilities {
+    /* Reserve the scrollbar gutter so content does not shift width when a
+       scrollbar appears (e.g. when a collapsible section is opened). */
+    .scroll-stable {
+        scrollbar-gutter: stable;
+    }
+}

tailwind/app.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base";
+@import "_base.css";
+
+@import "tailwindcss/components";
+@import "_components.css";
+
+@import "tailwindcss/utilities";
+@import "_utilities.css";

tailwind/components/badge.css

@@ -0,0 +1,3 @@
+.badge {
+    @apply inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap;
+}

tailwind/components/button.css

@@ -0,0 +1,35 @@
+.button {
+    @apply inline-flex items-center justify-center space-x-2 h-8 leading-8 md:h-10 md:leading-10 px-4 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center text-sm md:text-base;
+    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
+    @apply rounded-md;
+}
+
+.button--small {
+    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
+}
+
+.button--primary {
+    background: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
+    @apply text-white;
+    @apply hover:bg-none hover:bg-pink/80;
+}
+
+.button[disabled] {
+    @apply cursor-not-allowed;
+}
+
+.button--secondary {
+    @apply bg-none bg-primary-light text-white;
+    @apply hover:bg-primary-light/50;
+}
+
+.button--neutral {
+    @apply bg-none bg-gray-200;
+    @apply hover:bg-gray-200/50;
+}
+
+.button--warning {
+    @apply bg-none bg-red-500 text-white;
+    @apply hover:bg-red-500/50;
+}

tailwind/components/forms.css

@@ -0,0 +1,30 @@
+label.required:after {
+    @apply inline-block text-sm;
+    content: '*';
+}
+
+.form-field {
+    @apply border-zinc-400 ring-0 mt-1 block w-full rounded-md;
+    @apply focus:outline-primary-light focus:border-zinc-800 focus:outline-2 focus:outline-offset-2;
+}
+
+.form-field--has-error {
+    @apply border-red-700;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light text-primary h-4 w-4;
+}
+
+.form-checkbox--has-error,
+.form-radio--has-error {
+    @apply border-red-700;
+}
+
+select[readonly] {
+    @apply pointer-events-none cursor-not-allowed;
+}
+input[readonly] {
+    @apply cursor-not-allowed;
+}

tailwind/components/typography.css

@@ -0,0 +1,28 @@
+h1,
+.headline--primary {
+    @apply block text-3xl md:text-4xl font-bold mb-2;
+}
+
+h2,
+.headline--secondary {
+    @apply block text-2xl md:text-3xl font-bold mb-2;
+}
+
+h3,
+.headline--3 {
+    @apply block text-xl md:text-2xl font-bold leading-6 mb-2;
+}
+
+h4,
+.headline--4 {
+    @apply block font-semibold;
+}
+
+.headline--underlined:after {
+    @apply block border-b-4 border-primary-light pb-4 mb-4 -mt-2 w-20;
+    content: '';
+}
+
+.subline {
+    @apply block text-xs md:text-sm font-normal leading-6 opacity-60;
+}