feat: add Tailwind CSS via its own CLI

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