My documentation website is made with docusaurus, and when I try implement the the landing page there I run into a road black:
if I used your styles/globals.css as is. tailwind srew up the docusaurus styling. if I tried to scope tailwind to into change global css, no matter how much I tried, the docusaurus style stays intact, but the visual discrepencies are all over.

my attempt at adapting you css in the docusaurus css file:
https://imgur.com/cFYN3Wb

@import "tailwindcss/theme.css" layer(theme);
@import url('
@import url('

@layer base {
#tw-scope {
@import "tailwindcss/preflight.css" layer(base);
}
}

@import "tailwindcss/utilities.css" layer(utilities);

@custom-variant dark (&:is([data-theme="dark"] *));

/* 4. Tokens — now scoped to #tw-scope so MDX never sees them */
#tw-scope {
--radius: 0.65rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(92% 0.004 286.32);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--color-1: oklch(66.2% 0.225 25.9);
--color-2: oklch(60.4% 0.26 302);
--color-3: oklch(69.6% 0.165 251);
--color-4: oklch(80.2% 0.134 225);
--color-5: oklch(90.7% 0.231 133);
/* ... all your tokens ... */


--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-xl: calc(var(--radius) + 4px);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);

--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
--animate-collapsible-down: collapsible-down 0.2s ease-out;
--animate-collapsible-up: collapsible-up 0.2s ease-out;
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
--animate-marquee: marquee var(--duration) infinite linear;
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
--animate-border-move: border-move 5s linear infinite;
--animate-border-beam: border-beam var(--duration) infinite linear;
--animate-rainbow: rainbow var(--duration) infinite linear;
--animate-aurora: aurora var(--duration) infinite linear;
}

html[data-theme="dark"] #tw-scope {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--color-1: oklch(66.2% 0.225 25.9);
--color-2: oklch(60.4% 0.26 302);
--color-3: oklch(69.6% 0.165 251);
--color-4: oklch(80.2% 0.134 225);
--color-5: oklch(90.7% 0.231 133);
/* ... dark tokens ... */
}

/* 6. Keyframes stay global (safe) */
@keyframes accordion-down {
from { height: 0; }
to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
from { height: var(--radix-accordion-content-height); }
to { height: 0; }
}

@keyframes collapsible-down {
from { height: 0; }
to { height: var(--radix-collapsible-content-height); }
}

@keyframes collapsible-up {
from { height: var(--radix-collapsible-content-height); }
to { height: 0; }
}

@keyframes caret-blink {
0%, 70%, 100% { opacity: 1; }
20%, 50% { opacity: 0; }
}

@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--gap))); }
}

@keyframes marquee-vertical {
from { transform: translateY(0); }
to { transform: translateY(calc(-100% - var(--gap))); }
}

@keyframes rainbow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes aurora {
0% { background-position: 0% 50%; transform: rotate(-5deg) scale(0.9); }
25% { background-position: 50% 100%; transform: rotate(5deg) scale(1.1); }
50% { background-position: 100% 50%; transform: rotate(-3deg) scale(0.95); }
75% { background-position: 50% 0%; transform: rotate(3deg) scale(1.05); }
100% { background-position: 0% 50%; transform: rotate(-5deg) scale(0.9); }
}
/* ... rest of keyframes ... */

/* 7. Typography scoped to landing */
#tw-scope {
background: var(--background);
color: var(--foreground);
font-family: Inter, Arial, Helvetica, sans-serif;
line-height: 1.5;
}

#tw-scope .font-plex {
font-family: 'IBM Plex Mono', monospace;
}

#tw-scope h1,
#tw-scope h2,
#tw-scope h3,
#tw-scope h4,
#tw-scope h5,
#tw-scope h6 {
font-family: Inter, Arial, Helvetica, sans-serif !important;
font-weight: 600;
line-height: 1.2;
margin: 0;
}

#tw-scope p,
#tw-scope li,
#tw-scope a,
#tw-scope button,
#tw-scope input,
#tw-scope textarea {
font-family: inherit;
}

@layer base {
#tw-scope * {
border-color: var(--color-border);
outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent);
}
#tw-scope {
background-color: var(--color-background);
color: var(--color-foreground);
}
}

/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #209cee;
--ifm-color-primary-dark: #118fe2;
--ifm-color-primary-darker: #1087d5;
--ifm-color-primary-darkest: #0d6fb0;
--ifm-color-primary-light: #39a7f0;
--ifm-color-primary-lighter: #46adf1;
--ifm-color-primary-lightest: #6bbdf4;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

you can try it yourself, """npx create-docusaurus@latest metronic-landing classic"""
and try to imlement the landing https://metronic-saas.keenthemes.com/ in there. this is to say I'm using stock docusaurus, not styling it with css or anything. so the fact that you landing page is incompatible with the goto docs website is kind of defeating the purpose of a landing page for a non nextjs, react project.

if I used your css as, the landing page styling works as expected, but when I visit any other page where it uses docusaurus .mdx the result is this broken styles, since tailwind overrides global css values
you can see it here
https://imgur.com/39RwwjR