Merge pull request #19395 from Nexus-Mods/fix/theme-page-styling

Fix: CSS layer ordering and Tailwind utility conflicts

Author: insomnious

src/stylesheets/loadingScreen.scss

@@ -1,3 +1,6 @@
+/* Layer order must be declared before any @layer blocks - must match tailwind-v4.css */
+@layer theme, base, bootstrap-reset, bootstrap-components, bootstrap-override, components, utilities;
+
 @import "variables.scss";
 @import "details.scss";
 @import "bootstrap-override.scss";

src/stylesheets/tailwind-v4.css

@@ -4,10 +4,11 @@
  * 2. base               - Tailwind preflight
  * 3. bootstrap-reset    - Bootstrap's normalize/scaffolding (overrides preflight)
  * 4. bootstrap-components - Bootstrap components
- * 5. components         - Tailwind components
- * 6. utilities          - Tailwind utilities (highest priority)
+ * 5. bootstrap-override - Bootstrap overrides (above components)
+ * 6. components         - Tailwind components
+ * 7. utilities          - Tailwind utilities (highest priority)
  */
-@layer theme, base, bootstrap-reset, bootstrap-components, components, utilities;
+@layer theme, base, bootstrap-reset, bootstrap-components, bootstrap-override, components, utilities;
 
 @import "tailwindcss";
 
@@ -16,13 +17,8 @@
  * - container: Tailwind's responsive container conflicts with Bootstrap's grid container
  * - collapse: Tailwind's `visibility: collapse` overrides Bootstrap's collapse component
  */
-@utility container {
-    all: unset;
-}
-
-@utility collapse {
-    all: unset;
-}
+@source not inline('container');
+@source not inline('collapse');
 
 /* Import shared design system from nexus-next */
 @import "./shared/theme";

src/stylesheets/thirdparty.scss

@@ -1,3 +1,6 @@
+/* Layer order must be declared before any @layer blocks - must match tailwind-v4.css */
+@layer theme, base, bootstrap-reset, bootstrap-components, bootstrap-override, components, utilities;
+
 @import "bootstrap/_bootstrap";
 @import "react-select";
 @import "resizer";