import custom.css into the "components" layer

fixing specificity problem with button paddings (among others)

Author: overheadhunter

assets/css/custom.css

@@ -160,8 +160,3 @@ textarea:read-only {
   margin-top: -96px;
   visibility: hidden;
 }
-
-/* see https://alpinejs.dev/directives/cloak */
-[x-cloak] {
-  display: none !important;
-}

assets/css/main.css

@@ -1,6 +1,10 @@
 @import 'tailwindcss';
-@import './custom.css';
 @import './fonts.css';
+
+@layer components {
+  @import './custom.css';
+}
+
 @import '@skymatic/fontawesome-pro/css/all' layer(components);
 
 @plugin '@tailwindcss/forms';
@@ -165,6 +169,11 @@
   padding-inline: 1rem;
 }
 
+/* see https://alpinejs.dev/directives/cloak */
+[x-cloak] {
+  display: none;
+}
+
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still