diff --git a/packages/core/src/node/constants.ts b/packages/core/src/node/constants.ts
index dfc33516e..d9f41490e 100644
--- a/packages/core/src/node/constants.ts
+++ b/packages/core/src/node/constants.ts
@@ -17,6 +17,7 @@ export const inlineThemeScript = `{
   const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches
   const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark'
   document.documentElement.classList.toggle('dark', isDark)
+  document.documentElement.classList.toggle('rp-dark', isDark)
   document.documentElement.style.colorScheme = isDark ? 'dark' : 'light'
 }`
   .replace(/\n/g, ';')
diff --git a/packages/theme-default/src/components/Aside/index.tsx b/packages/theme-default/src/components/Aside/index.tsx
index 36fb82071..cce2c2814 100644
--- a/packages/theme-default/src/components/Aside/index.tsx
+++ b/packages/theme-default/src/components/Aside/index.tsx
@@ -22,7 +22,7 @@ const TocItem = ({
       <a
         href={`#${header.id}`}
         title={parseInlineMarkdownText(header.text)}
-        className="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block"
+        className="aside-link rp-transition-all rp-duration-300 hover:rp-text-text-1 rp-text-text-2 rp-block"
         style={{
           marginLeft: (header.depth - baseHeaderLevel) * 12,
           fontWeight: 'semibold',
@@ -32,7 +32,7 @@ const TocItem = ({
           window.location.hash = header.id;
         }}
       >
-        <span className="aside-link-text block">
+        <span className="aside-link-text rp-block">
           {renderInlineMarkdown(header.text)}
         </span>
       </a>
@@ -79,13 +79,16 @@ export function Aside(props: { headers: Header[]; outlineTitle: string }) {
   }, [decodedHash, headers, pathname]);
 
   return (
-    <div className="flex flex-col">
-      <div id="aside-container" className="relative text-sm font-medium">
-        <div className="leading-7 block text-sm font-semibold pl-3">
+    <div className="rp-flex rp-flex-col">
+      <div
+        id="aside-container"
+        className="rp-relative rp-text-sm rp-font-medium"
+      >
+        <div className="rp-leading-7 rp-block rp-text-sm rp-font-semibold rp-pl-3">
           {props.outlineTitle}
         </div>
-        <nav className="mt-1">
-          <ul className="relative">
+        <nav className="rp-mt-1">
+          <ul className="rp-relative">
             {headers.map(header => (
               <TocItem
                 key={`${pathname}#${header.id}`}
diff --git a/packages/theme-default/src/components/Badge/index.tsx b/packages/theme-default/src/components/Badge/index.tsx
index 1b6f30728..1d9735eef 100644
--- a/packages/theme-default/src/components/Badge/index.tsx
+++ b/packages/theme-default/src/components/Badge/index.tsx
@@ -52,9 +52,9 @@ export function Badge({
 
   return (
     <span
-      className={`inline-flex items-center justify-center rounded-full border border-solid ${
-        outline ? 'border-current' : 'border-transparent'
-      } font-semibold align-middle px-2.5 h-6 gap-1 text-xs ${styles.badge} ${styles[type]} ${
+      className={`rp-inline-flex rp-items-center rp-justify-center rp-rounded-full rp-border rp-border-solid ${
+        outline ? 'rp-border-current' : 'rp-border-transparent'
+      } rp-font-semibold rp-align-middle rp-px-2.5 rp-h-6 rp-gap-1 rp-text-xs ${styles.badge} ${styles[type]} ${
         outline ? styles.outline : ''
       }`}
     >
diff --git a/packages/theme-default/src/components/Card/index.tsx b/packages/theme-default/src/components/Card/index.tsx
index cb7f9c182..97320c9b4 100644
--- a/packages/theme-default/src/components/Card/index.tsx
+++ b/packages/theme-default/src/components/Card/index.tsx
@@ -19,12 +19,15 @@ interface CardProps {
 
 export function Card({ content, title, icon, style }: CardProps) {
   return (
-    <div className="border border-gray-400 rounded-lg p-6" style={style}>
-      <p className="flex items-center gap-2 mb-4">
+    <div
+      className="rp-border rp-border-gray-400 rp-rounded-lg rp-p-6"
+      style={style}
+    >
+      <p className="rp-flex rp-items-center rp-gap-2 rp-mb-4">
         {icon && <div>{icon}</div>}
-        {title && <span className="text-2xl font-bold">{title}</span>}
+        {title && <span className="rp-text-2xl rp-font-bold">{title}</span>}
       </p>
-      <div className="text-base overflow-auto">{content}</div>
+      <div className="rp-text-base rp-overflow-auto">{content}</div>
     </div>
   );
 }
diff --git a/packages/theme-default/src/components/DocFooter/index.tsx b/packages/theme-default/src/components/DocFooter/index.tsx
index 0e469e036..be96987a2 100644
--- a/packages/theme-default/src/components/DocFooter/index.tsx
+++ b/packages/theme-default/src/components/DocFooter/index.tsx
@@ -15,15 +15,15 @@ export function DocFooter() {
   const showLastUpdated = themeConfig.lastUpdated || localesLastUpdated;
 
   return (
-    <footer className="mt-8">
-      <div className="xs:flex pb-5 px-2 justify-end items-center">
+    <footer className="rp-mt-8">
+      <div className="xs:rp-flex rp-pb-5 rp-px-2 rp-justify-end rp-items-center">
         {showLastUpdated && <LastUpdated />}
       </div>
-      <div className="flex flex-col">
+      <div className="rp-flex rp-flex-col">
         <EditLink />
       </div>
-      <div className="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6">
-        <div className={`${styles.prev} flex flex-col`}>
+      <div className="rp-flex rp-flex-col sm:rp-flex-row sm:rp-justify-around rp-gap-4 rp-pt-6">
+        <div className={`${styles.prev} rp-flex rp-flex-col`}>
           {prevPage && Boolean(prevPage.text) ? (
             <PrevNextPage
               type="prev"
@@ -32,7 +32,7 @@ export function DocFooter() {
             />
           ) : null}
         </div>
-        <div className={`${styles.next} flex flex-col`}>
+        <div className={`${styles.next} rp-flex rp-flex-col`}>
           {nextPage && Boolean(nextPage.text) ? (
             <PrevNextPage
               type="next"
diff --git a/packages/theme-default/src/components/HomeFeature/index.tsx b/packages/theme-default/src/components/HomeFeature/index.tsx
index 220052db1..6892eaa9c 100644
--- a/packages/theme-default/src/components/HomeFeature/index.tsx
+++ b/packages/theme-default/src/components/HomeFeature/index.tsx
@@ -33,7 +33,7 @@ export function HomeFeature({
   const features = frontmatter?.features;
 
   return (
-    <div className="overflow-hidden m-auto flex flex-wrap max-w-6xl">
+    <div className="rp-overflow-hidden rp-m-auto rp-flex rp-flex-wrap rp-max-w-6xl">
       {features?.map(feature => {
         const { icon, title, details, link: rawLink } = feature;
 
@@ -47,14 +47,12 @@ export function HomeFeature({
         return (
           <div
             key={title}
-            className={`${getGridClass(
-              feature,
-            )} rounded hover:var(--rp-c-brand)`}
+            className={`${getGridClass(feature)} rp-rounded hover:rp-var(--rp-c-brand)`}
           >
-            <div className="h-full p-2">
+            <div className="rp-h-full rp-p-2">
               <article
                 key={title}
-                className={`rspress-home-feature-card ${styles.featureCard} h-full p-8 rounded-4xl border-transparent`}
+                className={`rspress-home-feature-card ${styles.featureCard} rp-h-full rp-p-8 rp-rounded-4xl rp-border-transparent`}
                 style={{
                   cursor: link ? 'pointer' : 'auto',
                 }}
@@ -65,17 +63,17 @@ export function HomeFeature({
                 }}
               >
                 {icon ? (
-                  <div className="flex-center">
-                    <div className="rspress-home-feature-icon w-12 h-12 text-3xl text-center">
+                  <div className="rp-flex rp-items-center rp-justify-center">
+                    <div className="rspress-home-feature-icon rp-w-12 rp-h-12 rp-text-3xl rp-text-center">
                       {renderHtmlOrText(icon)}
                     </div>
                   </div>
                 ) : null}
 
-                <h2 className="rspress-home-feature-title font-bold text-center">
+                <h2 className="rspress-home-feature-title rp-font-bold rp-text-center">
                   {title}
                 </h2>
-                <p className="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">
+                <p className="rspress-home-feature-detail rp-leading-6 rp-pt-2 rp-text-sm rp-text-text-2 rp-font-medium">
                   {renderHtmlOrText(details)}
                 </p>
               </article>
diff --git a/packages/theme-default/src/components/HomeFooter/index.tsx b/packages/theme-default/src/components/HomeFooter/index.tsx
index 6188a0f51..1a0c82e75 100644
--- a/packages/theme-default/src/components/HomeFooter/index.tsx
+++ b/packages/theme-default/src/components/HomeFooter/index.tsx
@@ -9,10 +9,10 @@ export function HomeFooter() {
   }
 
   return (
-    <footer className="absolute bottom-0 mt-12 py-8 px-6 sm:p-8 w-full border-t border-solid border-divider-light">
-      <div className="m-auto w-full text-center">
+    <footer className="rp-absolute rp-bottom-0 rp-mt-12 rp-py-8 rp-px-6 sm:rp-p-8 rp-w-full rp-border-t rp-border-solid rp-border-divider-light">
+      <div className="rp-m-auto rp-w-full rp-text-center">
         <div
-          className="font-medium text-sm text-text-2"
+          className="rp-font-medium rp-text-sm rp-text-text-2"
           dangerouslySetInnerHTML={{
             __html: message,
           }}
diff --git a/packages/theme-default/src/components/HomeHero/index.tsx b/packages/theme-default/src/components/HomeHero/index.tsx
index 6a399f8a3..d8e3f8073 100644
--- a/packages/theme-default/src/components/HomeHero/index.tsx
+++ b/packages/theme-default/src/components/HomeHero/index.tsx
@@ -35,16 +35,16 @@ export function HomeHero({
       ? { light: hero.image.src, dark: hero.image.src }
       : hero.image?.src || { light: '', dark: '' };
   return (
-    <div className="m-auto pt-0 px-6 pb-12 sm:pt-10 sm:px-16 md:pt-16 md:px-16 md:pb-16 relative">
+    <div className="rp-m-auto rp-pt-0 rp-px-6 rp-pb-12 sm:rp-pt-10 sm:rp-px-16 md:rp-pt-16 md:rp-px-16 md:rp-pb-16 rp-relative">
       <div
         className={styles.mask}
         style={{
           left: hasImage ? '75%' : '50%',
         }}
       ></div>
-      <div className="m-auto flex flex-col md:flex-row max-w-6xl min-h-[50vh] mt-12 sm:mt-0">
-        <div className="flex flex-col justify-center items-center text-center max-w-xl sm:max-w-4xl m-auto order-2 md:order-1">
-          <h1 className="font-bold text-3xl pb-2 sm:text-6xl md:text-7xl m-auto sm:m-4 md:m-0 md:pb-3 lg:pb-2 leading-tight z-10">
+      <div className="rp-m-auto rp-flex rp-flex-col md:rp-flex-row rp-max-w-6xl rp-min-h-[50vh] rp-mt-12 sm:rp-mt-0">
+        <div className="rp-flex rp-flex-col rp-justify-center rp-items-center rp-text-center rp-max-w-xl sm:rp-max-w-4xl rp-m-auto rp-order-2 md:rp-order-1">
+          <h1 className="rp-font-bold rp-text-3xl rp-pb-2 sm:rp-text-6xl md:rp-text-7xl rp-m-auto sm:rp-m-4 md:rp-m-0 md:rp-pb-3 lg:rp-pb-2 rp-leading-tight rp-z-10">
             <span className={styles.clip} style={{ lineHeight: '1.3' }}>
               {renderHtmlOrText(hero.name)}
             </span>
@@ -53,7 +53,7 @@ export function HomeHero({
             multiHeroText.map(heroText => (
               <p
                 key={heroText}
-                className={`rspress-home-hero-text mx-auto md:m-0 text-3xl sm:text-5xl md:text-6xl sm:pb-2 font-bold z-10 ${textMaxWidth}`}
+                className={`rspress-home-hero-text rp-mx-auto md:rp-m-0 rp-text-3xl sm:rp-text-5xl md:rp-text-6xl sm:rp-pb-2 rp-font-bold rp-z-10 ${textMaxWidth}`}
                 style={{ lineHeight: '1.2' }}
               >
                 {renderHtmlOrText(heroText)}
@@ -61,24 +61,24 @@ export function HomeHero({
             ))}
 
           <p
-            className={`rspress-home-hero-tagline whitespace-pre-wrap pt-4 m-auto md:m-0 text-sm sm:tex-xl md:text-[1.5rem] text-text-2 font-medium z-10 ${textMaxWidth}`}
+            className={`rspress-home-hero-tagline rp-whitespace-pre-wrap rp-pt-4 rp-m-auto md:rp-m-0 rp-text-sm sm:rp-tex-xl md:rp-text-[1.5rem] rp-text-text-2 rp-font-medium rp-z-10 ${textMaxWidth}`}
           >
             {renderHtmlOrText(hero.tagline)}
           </p>
           {hero.actions?.length ? (
-            <div className="grid md:flex md:flex-wrap md:justify-center gap-3 m--1.5 pt-6 sm:pt-8 z-10">
+            <div className="rp-grid md:rp-flex md:rp-flex-wrap md:rp-justify-center rp-gap-3 rp-m--1.5 rp-pt-6 sm:rp-pt-8 rp-z-10">
               {hero.actions.map(action => {
                 const link = isExternalUrl(action.link)
                   ? action.link
                   : normalizeHrefInRuntime(withBase(action.link, routePath));
                 return (
-                  <div className="flex flex-shrink-0 p-1" key={link}>
+                  <div className="rp-flex rp-flex-shrink-0 rp-p-1" key={link}>
                     <Button
                       type="a"
                       href={link}
                       text={renderHtmlOrText(action.text)}
                       theme={action.theme}
-                      className="w-full"
+                      className="rp-w-full"
                     />
                   </div>
                 );
@@ -88,7 +88,7 @@ export function HomeHero({
         </div>
 
         {hasImage ? (
-          <div className="rspress-home-hero-image md:flex-center m-auto order-1 md:order-2 sm:flex md:none lg:flex">
+          <div className="rspress-home-hero-image md:rp-flex md:rp-items-center md:rp-justify-center rp-m-auto rp-order-1 md:rp-order-2 sm:rp-flex md:rp-none lg:rp-flex">
             <img
               src={normalizeImagePath(imageSrc.light)}
               alt={hero.image?.alt}
@@ -96,7 +96,7 @@ export function HomeHero({
               sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
               width={375}
               height={375}
-              className="dark:hidden"
+              className="dark:rp-hidden"
             />
             <img
               src={normalizeImagePath(imageSrc.dark)}
@@ -105,7 +105,7 @@ export function HomeHero({
               sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
               width={375}
               height={375}
-              className="hidden dark:block"
+              className="rp-hidden dark:rp-block"
             />
           </div>
         ) : null}
diff --git a/packages/theme-default/src/components/LastUpdated/index.tsx b/packages/theme-default/src/components/LastUpdated/index.tsx
index 775d5eb5b..3d1461664 100644
--- a/packages/theme-default/src/components/LastUpdated/index.tsx
+++ b/packages/theme-default/src/components/LastUpdated/index.tsx
@@ -14,7 +14,7 @@ export function LastUpdated() {
     themeConfig?.lastUpdatedText || localesLastUpdatedText;
 
   return (
-    <div className="flex text-sm text-text-2 leading-6 sm:leading-8 font-medium">
+    <div className="rp-flex rp-text-sm rp-text-text-2 rp-leading-6 sm:rp-leading-8 rp-font-medium">
       <p>
         {lastUpdatedText}: <span>{lastUpdatedTime}</span>
       </p>
diff --git a/packages/theme-default/src/components/LinkCard/index.tsx b/packages/theme-default/src/components/LinkCard/index.tsx
index 88852bedd..65f9c4629 100644
--- a/packages/theme-default/src/components/LinkCard/index.tsx
+++ b/packages/theme-default/src/components/LinkCard/index.tsx
@@ -25,17 +25,17 @@ export function LinkCard(props: LinkCardProps) {
 
   return (
     <div
-      className={`relative border border-gray-400 rounded-lg p-6 flex justify-between items-start hover:border-gray-500 transition-all duration-300 ${styles.linkCard}`}
+      className={`rp-relative rp-border rp-border-gray-400 rp-rounded-lg rp-p-6 rp-flex rp-justify-between rp-items-start hover:rp-border-gray-500 rp-transition-all rp-duration-300 ${styles.linkCard}`}
       style={style}
     >
-      <div className="flex flex-col">
+      <div className="rp-flex rp-flex-col">
         <a
           href={href}
-          className={`flex items-center gap-2 mb-4 ${styles.link}`}
+          className={`rp-flex rp-items-center rp-gap-2 rp-mb-4 ${styles.link}`}
         >
-          {title && <span className="text-2xl font-bold">{title}</span>}
+          {title && <span className="rp-text-2xl rp-font-bold">{title}</span>}
         </a>
-        <span className="text-base overflow-auto">{description}</span>
+        <span className="rp-text-base rp-overflow-auto">{description}</span>
       </div>
       <ArrowRight />
     </div>
diff --git a/packages/theme-default/src/components/Nav/NavBarTitle.tsx b/packages/theme-default/src/components/Nav/NavBarTitle.tsx
index 5d5d5f330..5b9a63b3b 100644
--- a/packages/theme-default/src/components/Nav/NavBarTitle.tsx
+++ b/packages/theme-default/src/components/Nav/NavBarTitle.tsx
@@ -29,13 +29,13 @@ export const NavBarTitle = () => {
           src={normalizeImagePath(rawLogo.light)}
           alt="logo"
           id="logo"
-          className="rspress-logo dark:hidden"
+          className="rspress-logo dark:rp-hidden"
         />
         <img
           src={normalizeImagePath(rawLogo.dark)}
           alt="logo"
           id="logo"
-          className="rspress-logo hidden dark:block"
+          className="rspress-logo rp-hidden dark:rp-block"
         />
       </>
     );
@@ -45,9 +45,9 @@ export const NavBarTitle = () => {
     <div className={`${styles.navBarTitle}`}>
       <Link
         href={localeData.langRoutePrefix}
-        className="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"
+        className="rp-flex rp-items-center rp-w-full rp-h-full rp-text-base rp-font-semibold rp-transition-opacity rp-duration-300 hover:rp-opacity-60"
       >
-        {logo && <div className="mr-1 min-w-8">{logo}</div>}
+        {logo && <div className="rp-mr-1 rp-min-w-8">{logo}</div>}
         {logoText && <span>{logoText}</span>}
         {!logo && !logoText && <span>{title}</span>}
       </Link>
diff --git a/packages/theme-default/src/components/Nav/NavMenuGroup.tsx b/packages/theme-default/src/components/Nav/NavMenuGroup.tsx
index ab3f02b13..19fa74275 100644
--- a/packages/theme-default/src/components/Nav/NavMenuGroup.tsx
+++ b/packages/theme-default/src/components/Nav/NavMenuGroup.tsx
@@ -30,28 +30,28 @@ function ActiveGroupItem({ item }: { item: NavItemWithLink }) {
   return (
     <div
       key={item.link}
-      className="rounded-2xl my-1 flex"
+      className="rp-rounded-2xl rp-my-1 rp-flex"
       style={{
         padding: '0.4rem 1.5rem 0.4rem 0.75rem',
       }}
     >
       {item.tag && <Tag tag={item.tag} />}
-      <span className="text-brand">{item.text}</span>
+      <span className="rp-text-brand">{item.text}</span>
     </div>
   );
 }
 
 function NormalGroupItem({ item }: { item: NavItemWithLink }) {
   return (
-    <div key={item.link} className="font-medium my-1">
+    <div key={item.link} className="rp-font-medium rp-my-1">
       <Link href={item.link}>
         <div
-          className="rounded-2xl hover:bg-mute"
+          className="rp-rounded-2xl hover:rp-bg-mute"
           style={{
             padding: '0.4rem 1.5rem 0.4rem 0.75rem',
           }}
         >
-          <div className="flex">
+          <div className="rp-flex">
             {item.tag && <Tag tag={item.tag} />}
             <span>{item.text}</span>
           </div>
@@ -112,7 +112,7 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         {'link' in item ? (
           renderLinkItem(item as NavItemWithLink)
         ) : (
-          <p className="font-bold text-gray-400 my-1 not:first:border">
+          <p className="rp-font-bold rp-text-gray-400 rp-my-1 not:first:rp-border">
             {item.text}
           </p>
         )}
@@ -121,10 +121,13 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
     );
   };
   return (
-    <div className="relative flex-center h-14" onMouseLeave={handleMouseLeave}>
+    <div
+      className="rp-relative rp-flex rp-items-center rp-justify-center rp-h-14"
+      onMouseLeave={handleMouseLeave}
+    >
       <button
         onMouseEnter={handleMouseEnter}
-        className="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"
+        className="rspress-nav-menu-group-button rp-flex rp-justify-center rp-items-center rp-font-medium rp-text-sm rp-text-text-1 hover:rp-text-text-2 rp-transition-colors rp-duration-200"
       >
         {link ? (
           // @ts-expect-error item.text may be ReactElement
@@ -132,7 +135,7 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         ) : (
           <>
             <span
-              className="text-sm font-medium flex"
+              className="rp-text-sm rp-font-medium rp-flex"
               style={{
                 marginRight: '2px',
               }}
@@ -145,7 +148,7 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         )}
       </button>
       <div
-        className="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300"
+        className="rspress-nav-menu-group-content rp-absolute rp-mx-0.8 rp-transition-opacity rp-duration-300"
         style={{
           opacity: isOpen ? 1 : 0,
           visibility: isOpen ? 'visible' : 'hidden',
@@ -155,7 +158,7 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         onMouseEnter={clearCloseTimer}
       >
         <div
-          className="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap"
+          className="rp-p-3 rp-pr-2 rp-w-full rp-h-full rp-max-h-100vh rp-whitespace-nowrap"
           style={{
             boxShadow: 'var(--rp-shadow-3)',
             zIndex: 100,
diff --git a/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx b/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
index 1e06f94b6..5d48c83e0 100644
--- a/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
+++ b/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
@@ -29,7 +29,7 @@ export function NavMenuSingleItem(
         key={item.text}
         className={`rspress-nav-menu-item ${styles.singleItem} ${
           isActive ? styles.activeItem : ''
-        } text-sm font-medium mx-0.5 px-3 py-2 flex items-center`}
+        } rp-text-sm rp-font-medium rp-mx-0.5 rp-px-3 rp-py-2 rp-flex rp-items-center`}
       >
         <Tag tag={item.tag} />
         {item.text}
diff --git a/packages/theme-default/src/components/Nav/NavTranslations.tsx b/packages/theme-default/src/components/Nav/NavTranslations.tsx
index c29bd9562..493d6aca1 100644
--- a/packages/theme-default/src/components/Nav/NavTranslations.tsx
+++ b/packages/theme-default/src/components/Nav/NavTranslations.tsx
@@ -6,7 +6,7 @@ export function NavTranslations() {
   const translationMenuData = useTranslationMenuData();
   return (
     <div
-      className={`translation ${styles.menuItem} flex text-sm font-bold items-center px-3 py-2`}
+      className={`translation ${styles.menuItem} rp-flex rp-text-sm rp-font-bold rp-items-center rp-px-3 rp-py-2`}
     >
       <div>
         <NavMenuGroup {...translationMenuData} />
diff --git a/packages/theme-default/src/components/Nav/NavVersions.tsx b/packages/theme-default/src/components/Nav/NavVersions.tsx
index e203d1d55..5001f970b 100644
--- a/packages/theme-default/src/components/Nav/NavVersions.tsx
+++ b/packages/theme-default/src/components/Nav/NavVersions.tsx
@@ -6,7 +6,7 @@ export function NavVersions() {
   const versionsMenuData = useVersionMenuData();
   return (
     <div
-      className={`translation ${styles.menuItem} flex text-sm font-bold items-center px-3 py-2`}
+      className={`translation ${styles.menuItem} rp-flex rp-text-sm rp-font-bold rp-items-center rp-px-3 rp-py-2`}
     >
       <div>
         <NavMenuGroup {...versionsMenuData} />
diff --git a/packages/theme-default/src/components/Nav/index.tsx b/packages/theme-default/src/components/Nav/index.tsx
index 9e6f49f0b..6ed64736d 100644
--- a/packages/theme-default/src/components/Nav/index.tsx
+++ b/packages/theme-default/src/components/Nav/index.tsx
@@ -54,10 +54,10 @@ export function Nav(props: NavProps) {
 
   const NavMenu = ({ menuItems }: { menuItems: NavItem[] }) => {
     return (
-      <div className="rspress-nav-menu menu h-14">
+      <div className="rspress-nav-menu rp-flex rp-justify-around rp-items-center rp-text-sm rp-font-bold rp-h-14">
         {menuItems.map(item => {
           return 'items' in item || Array.isArray(item) ? (
-            <div key={item.text} className="mx-3 last:mr-0">
+            <div key={item.text} className="rp-mx-3 last:rp-mr-0">
               <NavMenuGroup
                 {...item}
                 base={base}
@@ -107,16 +107,16 @@ export function Nav(props: NavProps) {
     return (
       <div className={styles.rightNav}>
         {hasSearch && (
-          <div className="flex sm:flex-1 items-center sm:pl-4 sm:pr-2">
+          <div className="rp-flex sm:rp-flex-1 rp-items-center sm:rp-pl-4 sm:rp-pr-2">
             <Search />
           </div>
         )}
         <NavMenu menuItems={rightMenuItems} />
-        <div className="flex-center flex-row">
+        <div className="rp-flex rp-items-center rp-justify-center rp-flex-row">
           {hasMultiLanguage && <NavTranslations />}
           {hasMultiVersion && <NavVersions />}
           {hasAppearanceSwitch && (
-            <div className="mx-2">
+            <div className="rp-mx-2">
               <SwitchAppearance />
             </div>
           )}
@@ -138,18 +138,18 @@ export function Nav(props: NavProps) {
     <>
       {beforeNav}
       <div
-        className={`${styles.navContainer} rspress-nav px-6 ${
+        className={`${styles.navContainer} rspress-nav rp-px-6 ${
           // Only hidden when it's not mobile
           hiddenNav && !isMobile ? styles.hidden : ''
         } ${computeNavPosition()}`}
       >
         <div
-          className={`${styles.container} flex justify-between items-center h-full`}
+          className={`${styles.container} rp-flex rp-justify-between rp-items-center rp-h-full`}
         >
           {beforeNavTitle}
           {navTitle || <NavBarTitle />}
           {afterNavTitle}
-          <div className="flex flex-1 justify-end items-center">
+          <div className="rp-flex rp-flex-1 rp-justify-end rp-items-center">
             {leftNav()}
             {rightNav()}
             {afterNavMenu}
diff --git a/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx b/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx
index a00357569..8a10a8e8d 100644
--- a/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx
+++ b/packages/theme-default/src/components/NavScreen/NavScreenMenuGroup.tsx
@@ -21,18 +21,18 @@ export function NavScreenMenuGroup(item: NavScreenMenuGroupItem) {
 
   function ActiveGroupItem({ item }: { item: NavItemWithLink }) {
     return (
-      <div className="p-1 text-center">
-        <span className="text-brand">{item.text}</span>
+      <div className="rp-p-1 rp-text-center">
+        <span className="rp-text-brand">{item.text}</span>
       </div>
     );
   }
 
   function NormalGroupItem({ item }: { item: NavItemWithLink }) {
     return (
-      <div className="py-1 font-medium">
+      <div className="rp-py-1 rp-font-medium">
         <Link href={item.link}>
           <div>
-            <div className="flex justify-center">
+            <div className="rp-flex rp-justify-center">
               <span>{item.text}</span>
             </div>
           </div>
@@ -55,7 +55,7 @@ export function NavScreenMenuGroup(item: NavScreenMenuGroupItem) {
         {'link' in item ? (
           renderLinkItem(item as NavItemWithLink)
         ) : (
-          <p className="font-bold text-gray-400 my-1 not:first:border">
+          <p className="rp-font-bold rp-text-gray-400 rp-my-1 not:first:rp-border">
             {item.text}
           </p>
         )}
@@ -67,7 +67,7 @@ export function NavScreenMenuGroup(item: NavScreenMenuGroupItem) {
     <div
       className={`${isOpen ? styles.open : ''} ${
         styles.navScreenMenuGroup
-      } relative`}
+      } rp-relative`}
     >
       <button
         className={styles.button}
diff --git a/packages/theme-default/src/components/NavScreen/index.tsx b/packages/theme-default/src/components/NavScreen/index.tsx
index 60feb1af8..801c1a53a 100644
--- a/packages/theme-default/src/components/NavScreen/index.tsx
+++ b/packages/theme-default/src/components/NavScreen/index.tsx
@@ -24,8 +24,8 @@ interface Props {
 const NavScreenTranslations = () => {
   const translationMenuData = useTranslationMenuData();
   return (
-    <div className="flex text-sm font-bold justify-center">
-      <div className="mx-1.5 my-1">
+    <div className="rp-flex rp-text-sm rp-font-bold rp-justify-center">
+      <div className="rp-mx-1.5 rp-my-1">
         <NavScreenMenuGroup {...translationMenuData} />
       </div>
     </div>
@@ -35,8 +35,8 @@ const NavScreenTranslations = () => {
 const NavScreenVersions = () => {
   const versionMenuData = useVersionMenuData();
   return (
-    <div className={'flex text-sm font-bold justify-center'}>
-      <div className="mx-1.5 my-1">
+    <div className={'rp-flex rp-text-sm rp-font-bold rp-justify-center'}>
+      <div className="rp-mx-1.5 rp-my-1">
         <NavScreenMenuGroup {...versionMenuData} />
       </div>
     </div>
@@ -45,7 +45,9 @@ const NavScreenVersions = () => {
 
 const NavScreenAppearance = () => {
   return (
-    <div className={`mt-2 ${styles.navAppearance} flex justify-center`}>
+    <div
+      className={`rp-mt-2 ${styles.navAppearance} rp-flex rp-justify-center`}
+    >
       <NoSSR>
         <SwitchAppearance />
       </NoSSR>
@@ -70,7 +72,7 @@ const NavScreenMenu = ({
     <div className={styles.navMenu}>
       {menuItems.map(item => {
         return (
-          <div key={item.text} className={`${styles.navMenuItem} w-full`}>
+          <div key={item.text} className={`${styles.navMenuItem} rp-w-full`}>
             {'link' in item ? (
               <NavMenuSingleItem
                 pathname={pathname}
@@ -81,7 +83,7 @@ const NavScreenMenu = ({
                 {...item}
               />
             ) : (
-              <div key={item.text} className="mx-3 last:mr-0">
+              <div key={item.text} className="rp-mx-3 last:rp-mr-0">
                 <NavScreenMenuGroup
                   {...item}
                   items={'items' in item ? item.items : item}
@@ -130,7 +132,7 @@ export function NavScreen(props: Props) {
           pathname={pathname}
           toggleScreen={toggleScreen}
         />
-        <div className="flex-center flex-col gap-2">
+        <div className="rp-flex rp-items-center rp-justify-center rp-flex-col rp-gap-2">
           {hasAppearanceSwitch && <NavScreenAppearance />}
           {hasMultiLanguage && <NavScreenTranslations />}
           {hasMultiVersion && <NavScreenVersions />}
diff --git a/packages/theme-default/src/components/Overview/index.tsx b/packages/theme-default/src/components/Overview/index.tsx
index 04e89a11e..695f5fb4b 100644
--- a/packages/theme-default/src/components/Overview/index.tsx
+++ b/packages/theme-default/src/components/Overview/index.tsx
@@ -52,7 +52,7 @@ const SearchInput = ({
   filterPlaceholderText: string;
 }) => {
   return (
-    <div className="flex items-center justify-start gap-4">
+    <div className="rp-flex rp-items-center rp-justify-start rp-gap-4">
       <label htmlFor="api-filter">{filterNameText}</label>
       <input
         ref={searchRef}
@@ -61,7 +61,7 @@ const SearchInput = ({
         id="api-filter"
         value={query}
         onChange={e => setQuery(e.target.value)}
-        className="border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 transition-shadow duration-250 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
+        className="rp-border rp-border-gray-300 dark:rp-border-gray-700 rp-rounded-lg rp-px-3 rp-py-2 rp-transition-shadow rp-duration-250 rp-ease-in-out focus:rp-outline-none focus:rp-ring-2 focus:rp-ring-green-500 focus:rp-ring-opacity-50"
       />
     </div>
   );
@@ -75,25 +75,25 @@ const GroupRenderer = ({
   group: Group;
   styles: Record<string, string>;
 }) => (
-  <div className="mb-16" key={group.name}>
+  <div className="rp-mb-16" key={group.name}>
     <h2>{renderInlineMarkdown(group.name)}</h2>
     <div className={styles.overviewGroups}>
       {group.items.map(item => (
         <div className={styles.overviewGroup} key={item.link}>
-          <div className="flex">
+          <div className="rp-flex">
             <h3 style={{ marginBottom: 8 }}>
               <Link href={normalizeHref(item.link)}>
                 {renderInlineMarkdown(item.text)}
               </Link>
             </h3>
           </div>
-          <ul className="list-none">
+          <ul className="rp-list-none">
             {item.headers?.map(header => (
               <li
                 key={header.id}
                 className={`${styles.overviewGroupLi} ${
                   styles[`level${header.depth}`]
-                } first:mt-2`}
+                } first:rp-mt-2`}
               >
                 <Link href={`${normalizeHref(item.link)}#${header.id}`}>
                   {renderInlineMarkdown(header.text)}
@@ -290,10 +290,11 @@ export function Overview(props: {
   const overviewTitle = title || 'Overview';
 
   return (
-    <div className="overview-index mx-auto">
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-10">
-        <h1 className="text-3xl leading-10 tracking-tight">{overviewTitle}</h1>
-        {/* Added search input */}
+    <div className="overview-index rp-mx-auto">
+      <div className="rp-flex rp-flex-col sm:rp-flex-row rp-items-start sm:rp-items-center rp-justify-between rp-mb-10">
+        <h1 className="rp-text-3xl rp-leading-10 rp-tracking-tight">
+          {overviewTitle}
+        </h1>
         <SearchInput
           query={query}
           setQuery={setQuery}
@@ -308,7 +309,7 @@ export function Overview(props: {
           <GroupRenderer key={group?.name} group={group} styles={styles} />
         ))
       ) : (
-        <div className="text-lg text-gray-500 text-center mt-9 pt-9 border-t border-gray-200 dark:border-gray-800">
+        <div className="rp-text-lg rp-text-gray-500 rp-text-center rp-mt-9 rp-pt-9 rp-border-t rp-border-gray-200 dark:rp-border-gray-800">
           {`${filterNoResultText}: ${query}`}
         </div>
       )}
diff --git a/packages/theme-default/src/components/ScrollToTop/index.tsx b/packages/theme-default/src/components/ScrollToTop/index.tsx
index c54551817..f7b5dc045 100644
--- a/packages/theme-default/src/components/ScrollToTop/index.tsx
+++ b/packages/theme-default/src/components/ScrollToTop/index.tsx
@@ -29,7 +29,7 @@ export function ScrollToTop() {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="currentColor"
-        className="w-6 h-6"
+        className="rp-w-6 rp-h-6"
       >
         <path
           fillRule="evenodd"
diff --git a/packages/theme-default/src/components/Search/NoSearchResult.tsx b/packages/theme-default/src/components/Search/NoSearchResult.tsx
index c079f0739..26dcd3117 100644
--- a/packages/theme-default/src/components/Search/NoSearchResult.tsx
+++ b/packages/theme-default/src/components/Search/NoSearchResult.tsx
@@ -9,9 +9,9 @@ export function NoSearchResult({ query }: { query: string }) {
   } = useLocaleSiteData();
 
   return (
-    <div className="flex flex-col items-center pt-8 pb-2">
-      <SvgWrapper icon={Empty} className="mb-4 opacity-80" />
-      <p className="mb-2">
+    <div className="rp-flex rp-flex-col rp-items-center rp-pt-8 rp-pb-2">
+      <SvgWrapper icon={Empty} className="rp-mb-4 rp-opacity-80" />
+      <p className="rp-mb-2">
         {searchNoResultsText} <b>&quot;{query}&quot;</b>
       </p>
       <p>{searchSuggestedQueryText}</p>
diff --git a/packages/theme-default/src/components/Search/SuggestItem.tsx b/packages/theme-default/src/components/Search/SuggestItem.tsx
index 404e110f8..6c27b9be5 100644
--- a/packages/theme-default/src/components/Search/SuggestItem.tsx
+++ b/packages/theme-default/src/components/Search/SuggestItem.tsx
@@ -77,13 +77,13 @@ export function SuggestItem({
     if (suggestion.type === 'header' || suggestion.type === 'title') {
       const { header, highlightInfoList } = suggestion;
       return (
-        <div className="font-medium">
+        <div className="rp-font-medium">
           {getHighlightedFragments(header, highlightInfoList)}
         </div>
       );
     }
 
-    return <div className="font-medium">{suggestion.header}</div>;
+    return <div className="rp-font-medium">{suggestion.header}</div>;
   };
 
   const renderStatementMatch = () => {
@@ -92,7 +92,7 @@ export function SuggestItem({
     }
     const { statement, highlightInfoList } = suggestion;
     return (
-      <div className="text-sm text-gray-light w-full">
+      <div className="rp-text-sm rp-text-gray-light rp-w-full">
         {getHighlightedFragments(statement, highlightInfoList)}
       </div>
     );
diff --git a/packages/theme-default/src/components/Sidebar/SidebarDivider.tsx b/packages/theme-default/src/components/Sidebar/SidebarDivider.tsx
index a96feb14c..82603748c 100644
--- a/packages/theme-default/src/components/Sidebar/SidebarDivider.tsx
+++ b/packages/theme-default/src/components/Sidebar/SidebarDivider.tsx
@@ -6,11 +6,11 @@ export type SidebarDividerProps = {
 export function SidebarDivider(props: SidebarDividerProps) {
   const { depth, dividerType } = props;
   const borderTypeStyle =
-    dividerType === 'dashed' ? 'border-dashed' : 'border-solid';
+    dividerType === 'dashed' ? 'rp-border-dashed' : 'rp-border-solid';
 
   return (
     <div
-      className={`${borderTypeStyle} border-t border-divider-light my-3`}
+      className={`${borderTypeStyle} rp-border-t rp-border-divider-light rp-my-3`}
       style={{ marginLeft: depth === 0 ? 0 : '18px' }}
     />
   );
diff --git a/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx b/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx
index 9d782c039..d6176b1bb 100644
--- a/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx
+++ b/packages/theme-default/src/components/Sidebar/SidebarGroup.tsx
@@ -104,14 +104,14 @@ export function SidebarGroup(props: SidebarItemProps) {
   return (
     <section
       key={id}
-      className="rspress-sidebar-section mt-0.5 block"
+      className="rspress-sidebar-section rp-mt-0.5 rp-block"
       data-context={item.context}
       style={{
         marginLeft: depth === 0 ? 0 : '18px',
       }}
     >
       <div
-        className={`rspress-sidebar-collapse flex justify-between items-center ${
+        className={`rspress-sidebar-collapse rp-flex rp-justify-between rp-items-center ${
           active ? styles.menuItemActive : styles.menuItem
         }`}
         data-context={item.context}
@@ -130,14 +130,14 @@ export function SidebarGroup(props: SidebarItemProps) {
         }}
       >
         <h2
-          className="py-2 px-3 text-sm font-medium flex"
+          className="rp-py-2 rp-px-3 rp-text-sm rp-font-medium rp-flex"
           style={{
             ...(depth === 0 ? highlightTitleStyle : {}),
           }}
         >
           <Tag tag={item.tag} />
           <span
-            className="flex-center"
+            className="rp-flex rp-items-center rp-justify-center"
             style={{
               fontSize: depth === 0 ? '14px' : '13px',
             }}
@@ -147,7 +147,7 @@ export function SidebarGroup(props: SidebarItemProps) {
         </h2>
         {collapsible && (
           <div
-            className={`${styles.collapseContainer} p-2 rounded-xl`}
+            className={`${styles.collapseContainer} rp-p-2 rp-rounded-xl`}
             onClick={toggleCollapse}
           >
             {collapsibleIcon}
@@ -156,7 +156,7 @@ export function SidebarGroup(props: SidebarItemProps) {
       </div>
       <div
         ref={containerRef}
-        className="transition-all duration-300 ease-in-out"
+        className="rp-transition-all rp-duration-300 rp-ease-in-out"
         style={{
           overflow: 'hidden',
           maxHeight: initialState.current ? 0 : undefined,
@@ -164,7 +164,7 @@ export function SidebarGroup(props: SidebarItemProps) {
       >
         <div
           ref={innerRef}
-          className="rspress-sidebar-group transition-opacity duration-500 ease-in-out"
+          className="rspress-sidebar-group rp-transition-opacity rp-duration-500 rp-ease-in-out"
           style={{
             opacity: initialState.current ? 0 : 1,
             marginLeft: depth === 0 ? '12px' : 0,
diff --git a/packages/theme-default/src/components/Sidebar/SidebarItem.tsx b/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
index c48d61895..6aead260f 100644
--- a/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
+++ b/packages/theme-default/src/components/Sidebar/SidebarItem.tsx
@@ -39,7 +39,7 @@ export function SidebarItem(props: SidebarItemProps) {
         ref={ref}
         className={`${
           active ? styles.menuItemActive : styles.menuItem
-        } mt-0.5 py-2 px-3 font-medium flex`}
+        } rp-mt-0.5 rp-py-2 rp-px-3 rp-font-medium rp-flex`}
         style={{
           // The first level menu item will have the same font size as the sidebar group
           fontSize: depth === 0 ? '14px' : '13px',
diff --git a/packages/theme-default/src/components/Sidebar/index.tsx b/packages/theme-default/src/components/Sidebar/index.tsx
index 04612a313..8edf4ac57 100644
--- a/packages/theme-default/src/components/Sidebar/index.tsx
+++ b/packages/theme-default/src/components/Sidebar/index.tsx
@@ -151,7 +151,7 @@ export function Sidebar(props: Props) {
         <div className={styles.navTitleMask}>{navTitle || <NavBarTitle />}</div>
       )}
       <div className={`rspress-scrollbar ${styles.sidebarContent}`}>
-        <nav className="pb-2">
+        <nav className="rp-pb-2">
           {beforeSidebar}
           <SidebarList
             sidebarData={sidebarData}
diff --git a/packages/theme-default/src/components/SidebarMenu/index.tsx b/packages/theme-default/src/components/SidebarMenu/index.tsx
index b2edef9ee..8c8cf2c6a 100644
--- a/packages/theme-default/src/components/SidebarMenu/index.tsx
+++ b/packages/theme-default/src/components/SidebarMenu/index.tsx
@@ -75,12 +75,12 @@ export function SidebarMenu({
             <button
               type="button"
               onClick={openSidebar}
-              className="flex-center mr-auto"
+              className="rp-flex rp-items-center rp-justify-center rp-mr-auto"
             >
-              <div className="text-md mr-2">
+              <div className="rp-text-md rp-mr-2">
                 <SvgWrapper icon={MenuIcon} />
               </div>
-              <span className="text-sm">Menu</span>
+              <span className="rp-text-sm">Menu</span>
             </button>
             {isSidebarOpen && (
               <div
@@ -98,12 +98,12 @@ export function SidebarMenu({
             <button
               type="button"
               onClick={() => setIsTocOpen(tocOpened => !tocOpened)}
-              className="flex-center ml-auto"
+              className="rp-flex rp-items-center rp-justify-center rp-ml-auto"
               ref={outlineButtonRef}
             >
-              <span className="text-sm">{outlineTitle}</span>
+              <span className="rp-text-sm">{outlineTitle}</span>
               <div
-                className="text-md mr-2"
+                className="rp-text-md rp-mr-2"
                 style={{
                   transform: isTocOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                   transition: 'transform 0.2s ease-out',
diff --git a/packages/theme-default/src/components/SocialLinks/HiddenLinks.tsx b/packages/theme-default/src/components/SocialLinks/HiddenLinks.tsx
index 5a9efd687..cc3b5d6b2 100644
--- a/packages/theme-default/src/components/SocialLinks/HiddenLinks.tsx
+++ b/packages/theme-default/src/components/SocialLinks/HiddenLinks.tsx
@@ -16,7 +16,7 @@ export const HiddenLinks = (props: IHiddenLinksProps) => {
         border: '1px solid var(--rp-c-divider-light)',
         background: 'var(--rp-c-bg)',
       }}
-      className="absolute top-8 right-0 z-1 p-3 w-32 rounded-2xl flex flex-wrap gap-4"
+      className="rp-absolute rp-top-8 rp-right-0 rp-z-1 rp-p-3 rp-w-32 rp-rounded-2xl rp-flex rp-flex-wrap rp-gap-4"
     >
       {links.map(item => (
         <LinkContent
diff --git a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
index 293a6dd82..f326a64cf 100644
--- a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
+++ b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
@@ -48,7 +48,7 @@ export const LinkContent = (props: ILinkContentComp) => {
   if (mode === 'text') {
     return (
       <div
-        className={`${styles.socialLinksIcon} cursor-pointer relative mx-3`}
+        className={`${styles.socialLinksIcon} rp-cursor-pointer rp-relative rp-mx-3`}
         onMouseEnter={mouseEnterIcon}
         onMouseLeave={mouseLeavePopper}
       >
@@ -60,9 +60,9 @@ export const LinkContent = (props: ILinkContentComp) => {
               border: '1px solid var(--rp-c-divider-light)',
               ...popperStyle,
             }}
-            className="z-[1] p-3 w-50 absolute right-0 bg-white dark:bg-dark"
+            className="rp-z-[1] rp-p-3 rp-w-50 rp-absolute rp-right-0 rp-bg-white dark:rp-bg-dark"
           >
-            <div className="text-md">{content}</div>
+            <div className="rp-text-md">{content}</div>
           </div>
         ) : null}
       </div>
@@ -71,14 +71,14 @@ export const LinkContent = (props: ILinkContentComp) => {
   if (mode === 'img') {
     return (
       <div
-        className={`${styles.socialLinksIcon} cursor-pointer relative`}
+        className={`${styles.socialLinksIcon} rp-cursor-pointer rp-relative`}
         onMouseEnter={mouseEnterIcon}
         onMouseLeave={mouseLeavePopper}
       >
         {IconComp}
         {contentVisible ? (
           <div
-            className="break-all z-[1] p-3 w-[50px] h-[50px] absolute right-0 bg-white dark:bg-dark rounded-xl"
+            className="rp-break-all rp-z-[1] rp-p-3 rp-w-[50px] rp-h-[50px] rp-absolute rp-right-0 rp-bg-white dark:rp-bg-dark rp-rounded-xl"
             style={{
               boxShadow: 'var(--rp-shadow-3)',
               ...popperStyle,
@@ -93,14 +93,14 @@ export const LinkContent = (props: ILinkContentComp) => {
   if (mode === 'dom') {
     return (
       <div
-        className={`${styles.socialLinksIcon} cursor-pointer relative`}
+        className={`${styles.socialLinksIcon} rp-cursor-pointer rp-relative`}
         onMouseEnter={mouseEnterIcon}
         onMouseLeave={mouseLeavePopper}
       >
         {IconComp}
         {contentVisible ? (
           <div
-            className="break-all z-[1] p-3 absolute right-0 bg-white dark:bg-dark rounded-xl"
+            className="rp-break-all rp-z-[1] rp-p-3 rp-absolute rp-right-0 rp-bg-white dark:rp-bg-dark rp-rounded-xl"
             style={{
               boxShadow: 'var(--rp-shadow-3)',
               ...popperStyle,
diff --git a/packages/theme-default/src/components/SocialLinks/ShownLinks.tsx b/packages/theme-default/src/components/SocialLinks/ShownLinks.tsx
index 95ba3a4df..96d7c4ffa 100644
--- a/packages/theme-default/src/components/SocialLinks/ShownLinks.tsx
+++ b/packages/theme-default/src/components/SocialLinks/ShownLinks.tsx
@@ -14,7 +14,7 @@ export const ShownLinks = (props: IShownLinksProps) => {
 
   return (
     <>
-      <div className="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2">
+      <div className="rp-flex rp-items-center rp-justify-center rp-h-full rp-gap-x-4 rp-transition-colors rp-duration-300 md:rp-mr-2">
         {links.map((item, index) => (
           <LinkContent
             key={index}
@@ -24,7 +24,7 @@ export const ShownLinks = (props: IShownLinksProps) => {
         ))}
       </div>
       {moreIconVisible ? (
-        <div className="md:ml-1 p-2" onMouseEnter={mouseEnter}>
+        <div className="md:rp-ml-1 rp-p-2" onMouseEnter={mouseEnter}>
           <SvgWrapper icon={ArrowDown} />
         </div>
       ) : null}
diff --git a/packages/theme-default/src/components/SocialLinks/index.tsx b/packages/theme-default/src/components/SocialLinks/index.tsx
index 6fdf1e6f0..e52d2a672 100644
--- a/packages/theme-default/src/components/SocialLinks/index.tsx
+++ b/packages/theme-default/src/components/SocialLinks/index.tsx
@@ -24,7 +24,7 @@ export const SocialLinks = ({ socialLinks }: { socialLinks: SocialLink[] }) => {
 
   return (
     <div
-      className={`social-links ${styles.menuItem} flex-center relative`}
+      className={`social-links ${styles.menuItem} rp-flex rp-items-center rp-justify-center rp-relative`}
       onMouseLeave={hide}
     >
       <ShownLinks
diff --git a/packages/theme-default/src/components/SourceCode/index.tsx b/packages/theme-default/src/components/SourceCode/index.tsx
index d2815688f..cbed5e5b9 100644
--- a/packages/theme-default/src/components/SourceCode/index.tsx
+++ b/packages/theme-default/src/components/SourceCode/index.tsx
@@ -14,14 +14,14 @@ export function SourceCode(props: SourceCodeProps) {
   const { sourceCodeText = 'Source' } = useLocaleSiteData();
   return (
     <div
-      className={`inline-block rounded border border-solid border-gray-light-3 dark:border-divider text-gray-400 ${styles.sourceCode}`}
+      className={`rp-inline-block rp-rounded rp-border rp-border-solid rp-border-gray-light-3 dark:rp-border-divider rp-text-gray-400 ${styles.sourceCode}`}
     >
       <a
         href={href}
         target="_blank"
-        className="flex items-center content-center transition-all duration-300 text-xs px-2 py-1 "
+        className="rp-flex rp-items-center rp-content-center rp-transition-all rp-duration-300 rp-text-xs rp-px-2 rp-py-1"
       >
-        <span className="mr-2 inline-flex w-4 h-4">
+        <span className="rp-mr-2 rp-inline-flex rp-w-4 rp-h-4">
           {<SvgWrapper icon={platform === 'gitlab' ? Gitlab : Github} />}
         </span>
         <span>{sourceCodeText}</span>
diff --git a/packages/theme-default/src/components/Steps/index.tsx b/packages/theme-default/src/components/Steps/index.tsx
index 558a74f79..f261844eb 100644
--- a/packages/theme-default/src/components/Steps/index.tsx
+++ b/packages/theme-default/src/components/Steps/index.tsx
@@ -4,7 +4,7 @@ import * as styles from './index.module.scss';
 export function Steps({ children }: { children: ReactNode }) {
   return (
     <div
-      className={`ml-4 mb-11 border-l pl-6 ${styles.rspressSteps} [counter-reset:step]`}
+      className={`rp-ml-4 rp-mb-11 rp-border-l rp-pl-6 ${styles.rspressSteps} [counter-reset:step]`}
     >
       {children}
     </div>
diff --git a/packages/theme-default/src/components/SwitchAppearance/index.tsx b/packages/theme-default/src/components/SwitchAppearance/index.tsx
index c07e133f6..950c31fac 100644
--- a/packages/theme-default/src/components/SwitchAppearance/index.tsx
+++ b/packages/theme-default/src/components/SwitchAppearance/index.tsx
@@ -86,17 +86,17 @@ export function SwitchAppearance({ onClick }: { onClick?: () => void }) {
   };
 
   return (
-    <div onClick={handleClick} className="md:mr-2 rspress-nav-appearance">
-      <div className="p-1 border border-solid border-gray-300 text-gray-400  cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7">
+    <div onClick={handleClick} className="md:rp-mr-2 rspress-nav-appearance">
+      <div className="rp-p-1 rp-border rp-border-solid rp-border-gray-300 rp-text-gray-400 rp-cursor-pointer rp-rounded-md hover:rp-border-gray-600 hover:rp-text-gray-600 dark:hover:rp-border-gray-200 dark:hover:rp-text-gray-200 rp-transition-all rp-duration-300 rp-w-7 rp-h-7">
         <SvgWrapper
-          className="dark:hidden"
+          className="dark:rp-hidden"
           icon={SunSvg}
           width="18"
           height="18"
           fill="currentColor"
         />
         <SvgWrapper
-          className="hidden dark:block"
+          className="rp-hidden dark:rp-block"
           icon={MoonSvg}
           width="18"
           height="18"
diff --git a/packages/theme-default/src/components/Tabs/index.tsx b/packages/theme-default/src/components/Tabs/index.tsx
index e635607da..3cbc8cd07 100644
--- a/packages/theme-default/src/components/Tabs/index.tsx
+++ b/packages/theme-default/src/components/Tabs/index.tsx
@@ -178,7 +178,7 @@ export function Tab({
 }: ComponentPropsWithRef<'div'> &
   Pick<TabItem, 'label' | 'value'>): ReactElement {
   return (
-    <div {...props} className="rounded px-2">
+    <div {...props} className="rp-rounded rp-px-2">
       {children}
     </div>
   );
diff --git a/packages/theme-default/src/components/Toc/index.tsx b/packages/theme-default/src/components/Toc/index.tsx
index 5f97e8578..88d388bc0 100644
--- a/packages/theme-default/src/components/Toc/index.tsx
+++ b/packages/theme-default/src/components/Toc/index.tsx
@@ -15,7 +15,7 @@ const TocItem = ({
     <li>
       <Link
         href={`#${header.id}`}
-        className={'rspress-toc-link sm:text-normal text-sm'}
+        className={'rspress-toc-link sm:rp-text-normal rp-text-sm'}
         style={{
           marginLeft: (header.depth - 2) * 12,
         }}
@@ -23,7 +23,7 @@ const TocItem = ({
           onItemClick?.(header);
         }}
       >
-        <span className={'rspress-toc-link-text block'}>
+        <span className={'rspress-toc-link-text rp-block'}>
           {renderInlineMarkdown(header.text)}
         </span>
       </Link>
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/hr.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/hr.tsx
index 585bb29f6..33fbdcf75 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/hr.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/hr.tsx
@@ -4,7 +4,7 @@ export const Hr = (props: ComponentProps<'hr'>) => {
   return (
     <hr
       {...props}
-      className="my-12 border-t border-solid border-divider-light"
+      className="rp-my-12 rp-border-t rp-border-solid rp-border-divider-light"
     />
   );
 };
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/list.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/list.tsx
index 4f4b1bc03..93b07440f 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/list.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/list.tsx
@@ -1,13 +1,17 @@
 import type { ComponentProps } from 'react';
 
 export const Ol = (props: ComponentProps<'ol'>) => {
-  return <ol {...props} className="list-decimal pl-5 my-4 leading-7" />;
+  return (
+    <ol {...props} className="rp-list-decimal rp-pl-5 rp-my-4 rp-leading-7" />
+  );
 };
 
 export const Ul = (props: ComponentProps<'ul'>) => {
-  return <ul {...props} className="list-disc pl-5 my-4 leading-7" />;
+  return (
+    <ul {...props} className="rp-list-disc rp-pl-5 rp-my-4 rp-leading-7" />
+  );
 };
 
 export const Li = (props: ComponentProps<'li'>) => {
-  return <li {...props} className="[&:not(:first-child)]:mt-2" />;
+  return <li {...props} className="[&:not(:first-child)]:rp-mt-2" />;
 };
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
index d3ac53859..bb817a08c 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
@@ -2,18 +2,18 @@ import type { ComponentProps } from 'react';
 import * as styles from './index.module.scss';
 
 export const P = (props: ComponentProps<'p'>) => {
-  return <p {...props} className="my-4 leading-7" />;
+  return <p {...props} className="rp-my-4 rp-leading-7" />;
 };
 
 export const Blockquote = (props: ComponentProps<'blockquote'>) => {
   return (
     <blockquote
       {...props}
-      className={`border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 ${styles.blockquote}`}
+      className={`rp-border-l-2 rp-border-solid rp-border-divider rp-pl-4 rp-my-6 rp-transition-colors rp-duration-500 ${styles.blockquote}`}
     />
   );
 };
 
 export const Strong = (props: ComponentProps<'strong'>) => {
-  return <strong {...props} className="font-semibold" />;
+  return <strong {...props} className="rp-font-semibold" />;
 };
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/table.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/table.tsx
index 405575d0d..77dd54e1b 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/table.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/table.tsx
@@ -4,7 +4,7 @@ export const Table = (props: ComponentProps<'table'>) => {
   return (
     <table
       {...props}
-      className="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"
+      className="rp-block rp-border-collapse rp-text-base rp-my-5 rp-overflow-x-auto rp-leading-7 rp-border-gray-light-3 dark:rp-border-divider"
     />
   );
 };
@@ -13,7 +13,7 @@ export const Tr = (props: ComponentProps<'tr'>) => {
   return (
     <tr
       {...props}
-      className="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"
+      className="rp-border rp-border-solid rp-transition-colors rp-duration-500 even:rp-bg-soft rp-border-gray-light-3 dark:rp-border-divider"
     />
   );
 };
@@ -22,7 +22,7 @@ export const Td = (props: ComponentProps<'td'>) => {
   return (
     <td
       {...props}
-      className="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"
+      className="rp-border rp-border-solid rp-px-4 rp-py-2 rp-border-gray-light-3 dark:rp-border-divider"
     />
   );
 };
@@ -31,7 +31,7 @@ export const Th = (props: ComponentProps<'th'>) => {
   return (
     <th
       {...props}
-      className="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider"
+      className="rp-border rp-border-solid rp-px-4 rp-py-2 rp-text-text-1 rp-text-base rp-font-semibold rp-border-gray-light-3 dark:rp-border-divider"
     />
   );
 };
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
index eea8aa139..ddfae6dcd 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/title.tsx
@@ -5,7 +5,7 @@ export const H1 = (props: React.ComponentProps<'h1'>) => {
   return (
     <h1
       {...props}
-      className={`rspress-doc-title text-3xl mb-10 leading-10 tracking-tight ${styles.title}`}
+      className={`rspress-doc-title rp-text-3xl rp-mb-10 rp-leading-10 rp-tracking-tight ${styles.title}`}
     />
   );
 };
@@ -14,19 +14,27 @@ export const H2 = (props: React.ComponentProps<'h2'>) => {
   return (
     <h2
       {...props}
-      className={`mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light ${styles.title}`}
+      className={`rp-mt-12 rp-mb-6 rp-pt-8 rp-text-2xl rp-tracking-tight rp-border-t rp-border-divider-light ${styles.title}`}
     />
   );
 };
 
 export const H3 = (props: React.ComponentProps<'h3'>) => {
   return (
-    <h3 {...props} className={`mt-10 mb-2 leading-7 text-xl ${styles.title}`} />
+    <h3
+      {...props}
+      className={`rp-mt-10 rp-mb-2 rp-leading-7 rp-text-xl ${styles.title}`}
+    />
   );
 };
 
 export const H4 = (props: React.ComponentProps<'h4'>) => {
-  return <h4 {...props} className={`mt-8 leading-6 text-lg ${styles.title}`} />;
+  return (
+    <h4
+      {...props}
+      className={`rp-mt-8 rp-leading-6 rp-text-lg ${styles.title}`}
+    />
+  );
 };
 
 export const H5 = (props: React.ComponentProps<'h5'>) => {
diff --git a/packages/theme-default/src/layout/DocLayout/index.tsx b/packages/theme-default/src/layout/DocLayout/index.tsx
index 09da7b559..7f956f206 100644
--- a/packages/theme-default/src/layout/DocLayout/index.tsx
+++ b/packages/theme-default/src/layout/DocLayout/index.tsx
@@ -88,7 +88,7 @@ export function DocLayout(props: DocLayoutProps) {
 
   return (
     <div
-      className={`${styles.docLayout} pt-0`}
+      className={`${styles.docLayout} rp-pt-0`}
       style={{
         ...(uiSwitch?.showNavbar ? {} : { marginTop: 0 }),
       }}
@@ -103,15 +103,17 @@ export function DocLayout(props: DocLayoutProps) {
           navTitle={navTitle}
         />
       )}
-      <div className="flex-1 relative min-w-0">
+      <div className="rp-flex-1 rp-relative rp-min-w-0">
         <SidebarMenu
           isSidebarOpen={isSidebarOpen}
           onIsSidebarOpenChange={setIsSidebarOpen}
           outlineTitle={outlineTitle}
           uiSwitch={uiSwitch}
         />
-        <div className={`${styles.content} rspress-doc-container flex`}>
-          <div className={`flex-1 ${isOverviewPage ? '' : 'overflow-x-auto'}`}>
+        <div className={`${styles.content} rspress-doc-container rp-flex`}>
+          <div
+            className={`rp-flex-1 ${isOverviewPage ? '' : 'rp-overflow-x-auto'}`}
+          >
             {isOverviewPage ? (
               <>
                 {beforeDocContent}
diff --git a/packages/theme-default/src/layout/HomeLayout/index.tsx b/packages/theme-default/src/layout/HomeLayout/index.tsx
index 975374452..ffc4465e0 100644
--- a/packages/theme-default/src/layout/HomeLayout/index.tsx
+++ b/packages/theme-default/src/layout/HomeLayout/index.tsx
@@ -17,13 +17,13 @@ export function HomeLayout(props: HomeLayoutProps) {
 
   return (
     <div
-      className="relative"
+      className="rp-relative"
       style={{
         minHeight: 'calc(100vh - var(--rp-nav-height))',
         paddingBottom: '80px',
       }}
     >
-      <div className="pb-12">
+      <div className="rp-pb-12">
         {beforeHero}
         <HomeHero frontmatter={frontmatter} routePath={routePath} />
         {afterHero}
diff --git a/packages/theme-default/src/layout/NotFountLayout/index.tsx b/packages/theme-default/src/layout/NotFountLayout/index.tsx
index 3c2dfa9ba..ab7836fb8 100644
--- a/packages/theme-default/src/layout/NotFountLayout/index.tsx
+++ b/packages/theme-default/src/layout/NotFountLayout/index.tsx
@@ -27,17 +27,19 @@ export function NotFoundLayout() {
 
   // The 404 page content
   return (
-    <div className="m-auto mt-50 p-16 sm:p-8 sm:pt-24 sm:pb-40 text-center flex-center flex-col">
-      <p className="text-6xl font-semibold">404</p>
-      <h1 className="leading-5 pt-3 text-xl font-bold">PAGE NOT FOUND</h1>
+    <div className="rp-m-auto rp-mt-50 rp-p-16 sm:rp-p-8 sm:rp-pt-24 sm:rp-pb-40 rp-text-center rp-flex rp-items-center rp-justify-center rp-flex-col">
+      <p className="rp-text-6xl rp-font-semibold">404</p>
+      <h1 className="rp-leading-5 rp-pt-3 rp-text-xl rp-font-bold">
+        PAGE NOT FOUND
+      </h1>
       <div
         style={{ height: '1px' }}
-        className="mt-6 mx-auto mb-4.5 w-16 bg-gray-light-1"
+        className="rp-mt-6 rp-mx-auto rp-mb-4.5 rp-w-16 rp-bg-gray-light-1"
       />
 
-      <div className="pt-5">
+      <div className="rp-pt-5">
         <a
-          className="py-2 px-4 rounded-2xl inline-block border-solid border-brand text-brand font-medium hover:border-brand-dark hover:text-brand-dark transition-colors duration-300"
+          className="rp-py-2 rp-px-4 rp-rounded-2xl rp-inline-block rp-border-solid rp-border-brand rp-text-brand rp-font-medium hover:rp-border-brand-dark hover:rp-text-brand-dark rp-transition-colors rp-duration-300"
           href={withBase(root)}
           aria-label="go to home"
         >
diff --git a/packages/theme-default/src/logic/useAppearance.ts b/packages/theme-default/src/logic/useAppearance.ts
index 0304d1745..97b896be1 100644
--- a/packages/theme-default/src/logic/useAppearance.ts
+++ b/packages/theme-default/src/logic/useAppearance.ts
@@ -68,6 +68,7 @@ export const useThemeState = () => {
 
   useEffect(() => {
     document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.classList.toggle('rp-dark', theme === 'dark');
     document.documentElement.style.colorScheme = theme;
   }, [theme]);
 
diff --git a/packages/theme-default/src/styles/base.css b/packages/theme-default/src/styles/base.css
index 53104b6e6..3ccaaf2a2 100644
--- a/packages/theme-default/src/styles/base.css
+++ b/packages/theme-default/src/styles/base.css
@@ -55,14 +55,6 @@ p {
   visibility: hidden;
 }
 
-.flex-center {
-  @apply flex items-center justify-center;
-}
-
-.menu {
-  @apply flex justify-around items-center text-sm font-bold;
-}
-
 .rspress-logo {
   height: 1.6rem;
 }
diff --git a/packages/theme-default/tailwind.config.ts b/packages/theme-default/tailwind.config.ts
index 9ad3508d0..caa356f7e 100644
--- a/packages/theme-default/tailwind.config.ts
+++ b/packages/theme-default/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 export default {
+  prefix: 'rp-',
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class',
   theme: {