test

src/app/[locale]/layout.tsx

@@ -10,9 +10,6 @@ import { clsx } from "clsx";
 import type { Metadata } from 'next'
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, setRequestLocale } from "next-intl/server";
-// https://github.com/mantinedev/mantine/issues/6109
-// https://mantine.dev/styles/mantine-styles/#css-layers
-import '@mantine/core/styles.layer.css'
 import React from "react";
 import styles from './layout.module.css';
 import MantineThemeProvider from "./mantine-theme-provider";

src/styles/globals.css

@@ -1,11 +1,21 @@
-/* ============= Basic setups ============= */
+/* ============= Layer setups ============= */
+/* https://mantine.dev/styles/mantine-styles/#css-layers */
+/* https://github.com/mantinedev/mantine/issues/6109 */
+/* https://github.com/orgs/mantinedev/discussions/1672#discussioncomment-10777394 */
+/* https://github.com/songkeys/next-app-mantine-tailwind-template/blob/b50ed8d3b8707988493ab4d0f481d5a379a109cf/src/app/globals.css */
 
-/* https://github.com/orgs/mantinedev/discussions/1672#discussioncomment-7870643 */
-@layer tailwind {
-  @tailwind base;
-}
-@tailwind components;
-@tailwind utilities;
+@layer tw_base, mantine, tw_components, tw_utilities;
+
+/*noinspection CssInvalidImport*/
+@import "tailwindcss/base" layer(tw_base);
+/*noinspection CssInvalidImport*/
+@import "tailwindcss/components" layer(tw_components);
+/*noinspection CssInvalidImport*/
+@import "tailwindcss/utilities" layer(tw_utilities);
+/*noinspection CssInvalidImport*/
+@import "@mantine/core/styles.layer.css";
+
+/* ============= Common tweaks ============= */
 
 .scrollbar-shift-fix {
   /* https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page/39289453#39289453 */