Tailwind improvements

.github/workflows/test.yml

@@ -15,7 +15,6 @@ jobs:
         with:
           php-version: 8.2
           tools: composer:v2
-          coverage: none
 
       - name: Get Cache Directory
         id: composer-cache-dir
@@ -40,4 +39,4 @@ jobs:
         run: composer lint
 
       - name: Run Tests
-        run: composer test
+        run: composer test:coverage

package.json

@@ -1,10 +1,4 @@
 {
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build"
-  },
   "devDependencies": {
     "@heroicons/vue": "^2.1.5",
     "@inertiajs/vue3": "^1.2.0",
@@ -15,8 +9,15 @@
     "laravel-vite-plugin": "^1.0.5",
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
+    "postcss-nested": "^6.2.0",
     "tailwindcss": "^3.4.12",
     "vite": "^5.4.6",
     "vue": "^3.5.6"
-  }
+  },
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "type": "module"
 }

postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        'postcss-import': {},
         'tailwindcss': {},
         'autoprefixer': {},
     }

resources/css/app.css

@@ -2,6 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import "@css/typography.css";
 @import "@css/forms.css";
 @import "@css/buttons.css";
 @import "@css/content.css";

resources/css/buttons.css

@@ -1,7 +1,13 @@
-.button {
-    @apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-colors ease-in-out duration-200;
-}
+@layer components {
+    .button {
+        @apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-all ease-in-out duration-200;
+    }
+
+    .button-full {
+        @apply w-full text-center justify-center;
+    }
 
-.button-full {
-    @apply w-full text-center justify-center;
+    .button[disabled] {
+        @apply pointer-events-none opacity-50;
+    }
 }

resources/css/content.css

@@ -1,93 +1,95 @@
-.content {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        @apply text-brand-900 font-heading;
-
-        a {
-            @apply text-brand-800 hover:no-underline;
+@layer components {
+    .content {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            @apply text-brand-900 font-heading;
+
+            a {
+                @apply text-brand-800 hover:no-underline;
+            }
         }
-    }
 
-    h1 {
-        @apply text-4xl md:text-5xl;
-    }
+        h1 {
+            @apply text-4xl md:text-5xl;
+        }
 
-    h2 {
-        @apply text-3xl;
-    }
+        h2 {
+            @apply text-3xl;
+        }
 
-    h3 {
-        @apply text-2xl;
-    }
+        h3 {
+            @apply text-2xl;
+        }
 
-    h4 {
-        @apply text-xl;
-    }
+        h4 {
+            @apply text-xl;
+        }
 
-    h5 {
-        @apply text-lg;
-    }
+        h5 {
+            @apply text-lg;
+        }
 
-    h6 {
-        @apply text-base;
-    }
+        h6 {
+            @apply text-base;
+        }
 
-    li {
-        @apply ml-8;
-    }
+        li {
+            @apply ml-8;
+        }
 
-    a {
-        @apply hover:underline;
-    }
+        a {
+            @apply hover:underline;
+        }
 
-    ul li {
-        @apply list-disc;
-    }
+        ul li {
+            @apply list-disc;
+        }
 
-    ol li {
-        @apply list-decimal;
-    }
+        ol li {
+            @apply list-decimal;
+        }
 
-    strong {
-        @apply font-bold;
-    }
+        strong {
+            @apply font-bold;
+        }
 
-    blockquote {
-        @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
-    }
+        blockquote {
+            @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
+        }
 
-    table {
-        @apply w-full text-sm text-left;
-    }
+        table {
+            @apply w-full text-sm text-left;
+        }
 
-    th {
-        @apply p-4 font-bold bg-brand-200;
-    }
+        th {
+            @apply p-4 font-bold bg-brand-200;
+        }
 
-    td {
-        @apply p-4 font-medium;
-    }
+        td {
+            @apply p-4 font-medium;
+        }
 
-    tr:not(:last-child) td {
-        @apply border-b border-brand-200;
-    }
+        tr:not(:last-child) td {
+            @apply border-b border-brand-200;
+        }
 
-    > * + * {
-        @apply mt-6;
-    }
+        > * + * {
+            @apply mt-6;
+        }
 
-    * {
-        & + h1,
-        & + h2,
-        & + h3,
-        & + h4,
-        & + h5,
-        & + h6 {
-            @apply mt-12;
+        * {
+            & + h1,
+            & + h2,
+            & + h3,
+            & + h4,
+            & + h5,
+            & + h6 {
+                @apply mt-12;
+            }
         }
     }
 }

resources/css/forms.css

@@ -1,58 +1,64 @@
-.form-row {
-    @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-3;
-}
+@layer components {
+    .form-row {
+        @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
+    }
 
-.form-col {
-    @apply col-span-full;
-}
+    .form-col {
+        @apply col-span-full;
+    }
 
-label {
-    &[for] {
-        @apply cursor-pointer;
+    .form-col-2 {
+        @apply col-span-2;
     }
-}
 
-.label {
-    @apply pb-3 block text-base font-medium;
-}
+    label {
+        &[for] {
+            @apply cursor-pointer;
+        }
+    }
 
-.small-label {
-    @apply block text-sm font-medium;
-}
+    .label {
+        @apply pb-3 block text-base font-medium;
+    }
 
-.inline-label {
-    @apply flex items-center gap-x-2;
-}
+    .small-label {
+        @apply block text-sm font-medium;
+    }
 
-.input,
-.textarea,
-.select,
-.checkbox,
-.radio {
-    @apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
-}
+    .inline-label {
+        @apply flex items-center gap-x-2;
+    }
 
-.input,
-.textarea,
-.select {
-    @apply block text-base w-full;
-}
+    .input,
+    .textarea,
+    .select,
+    .checkbox,
+    .radio {
+        @apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
+    }
 
-.textarea {
-    @apply min-h-32;
-}
+    .input,
+    .textarea,
+    .select {
+        @apply block text-base w-full;
+    }
 
-.select,
-.checkbox,
-.radio {
-    @apply cursor-pointer;
-}
+    .textarea {
+        @apply min-h-32;
+    }
 
-.checkbox,
-.radio {
-    @apply size-5 text-brand-800;
-}
+    .select,
+    .checkbox,
+    .radio {
+        @apply cursor-pointer;
+    }
 
-.radio {
-    @apply rounded-full;
+    .checkbox,
+    .radio {
+        @apply size-5 text-brand-800;
+    }
+
+    .radio {
+        @apply rounded-full;
+    }
 }

resources/css/typography.css

@@ -0,0 +1,29 @@
+@layer components {
+    .heading {
+        @apply text-neutral-900 font-semibold leading-none;
+    }
+
+    .h1 {
+        @apply text-4xl sm:text-5xl xl:text-6xl;
+    }
+
+    .h2 {
+        @apply text-3xl sm:text-4xl xl:text-5xl;
+    }
+
+    .h3 {
+        @apply text-xl sm:text-2xl xl:text-3xl;
+    }
+
+    .h4 {
+        @apply text-lg sm:text-xl xl:text-2xl;
+    }
+
+    .h5 {
+        @apply text-base sm:text-lg xl:text-xl;
+    }
+
+    .h6 {
+        @apply text-sm sm:text-base xl:text-lg;
+    }
+}