feat(theme)!: add prefix for isolating tailwind css

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}`}

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 : ''
       }`}
     >

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>
   );
 }

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"

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>

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,
           }}

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,32 +53,32 @@ 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)}
               </p>
             ))}
 
           <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,15 +88,15 @@ 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}
               srcSet={normalizeSrcsetAndSizes(hero.image?.srcset)}
               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}

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>

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>

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>

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,18 +121,21 @@ 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
           <NavMenuSingleItem {...item} rightIcon={<SvgWrapper icon={Down} />} />
         ) : (
           <>
             <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,