Move the styles inline to the file

Author: hasparus

src/app/(main)/layout.tsx

@@ -26,6 +26,7 @@ export default function MainLayout({
           toc={[]}
           docsDirectories={docsDirectories}
           fullDirectories={directories}
+          asPopover
         />
         <div className="isolate bg-neu-0 text-neu-900 antialiased">
           {children}

src/components/sidebar/index.tsx

@@ -52,22 +52,22 @@ const Folder = memo(function FolderInner(props: FolderProps) {
 
 const classes = {
   link: cn(
-    "_flex _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word]",
-    "_cursor-pointer contrast-more:border contrast-more:hover:underline gql-focus-visible focus-visible:outline-offset-1",
+    "flex px-2 py-1.5 text-sm transition-colors [word-break:break-word]",
+    "cursor-pointer contrast-more:border contrast-more:hover:underline gql-focus-visible focus-visible:outline-offset-1",
   ),
   inactive: cn(
     "text-neu-800 hover:bg-neu-100 hover:text-neu-900 hover:bg-neu-100 dark:hover:bg-neu-50/50",
     "contrast-more:border-transparent",
   ),
   active: cn(
     "bg-pri-lighter/25 text-pri-dark dark:bg-pri-light/10 dark:text-pri-light",
-    "contrast-more:_border-primary-500 contrast-more:dark:_border-primary-500",
+    "contrast-more:border-primary-500 contrast-more:dark:border-primary-500",
   ),
-  list: cn("_flex _flex-col _gap-1"),
+  list: cn("flex flex-col gap-1"),
   border: cn(
-    "_relative before:_absolute before:_inset-y-1",
-    'before:_w-px before:bg-neu-100 before:_content-[""] dark:before:bg-neu-50',
-    "ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0",
+    "relative before:absolute before:inset-y-1",
+    'before:w-px before:bg-neu-100 before:content-[""] dark:before:bg-neu-50',
+    "pl-3 before:left-0",
   ),
 }
 
@@ -164,8 +164,8 @@ function FolderImpl({ item, anchors, onFocus }: FolderProps): ReactElement {
         }
         data-href={isLink ? undefined : item.route}
         className={cn(
-          "_items-center _justify-between _gap-2",
-          !isLink && "_text-left _w-full",
+          "items-center justify-between gap-2",
+          !isLink && "w-full text-left",
           classes.link,
           active ? classes.active : classes.inactive,
         )}
@@ -197,17 +197,16 @@ function FolderImpl({ item, anchors, onFocus }: FolderProps): ReactElement {
         <ArrowRightIcon
           height="18"
           className={cn(
-            "_shrink-0",
-            "_p-0.5 hover:bg-neu-100/5",
-            "motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180",
-            open && "*:ltr:_rotate-90 *:rtl:_rotate-[-270deg]",
+            "shrink-0 p-0.5 hover:bg-neu-100/5",
+            "origin-center transition-transform motion-reduce:*:transition-none",
+            open && "rotate-90",
           )}
         />
       </ComponentToUse>
       {Array.isArray(item.children) && (
         <Collapse isOpen={open}>
           <Menu
-            className={cn(classes.border, "_pt-1 ltr:_ml-3 rtl:_mr-3")}
+            className={cn(classes.border, "ml-3 pt-1")}
             directories={item.children}
             base={item.route}
             anchors={anchors}
@@ -270,14 +269,14 @@ function File({
         {item.title}
       </Anchor>
       {active && anchors.length > 0 && (
-        <ul className={cn(classes.list, classes.border, "ltr:_ml-3 rtl:_mr-3")}>
+        <ul className={cn(classes.list, classes.border, "ml-3")}>
           {anchors.map(({ id, value }) => (
             <li key={id}>
               <a
                 href={`#${id}`}
                 className={cn(
                   classes.link,
-                  '_flex _gap-2 before:_opacity-25 before:_content-["#"]',
+                  'flex gap-2 before:opacity-25 before:content-["#"]',
                   activeAnchor[id]?.isActive
                     ? classes.active
                     : classes.inactive,
@@ -400,26 +399,26 @@ export function Sidebar({
   return (
     <>
       {includePlaceholder && asPopover && (
-        <div className="max-xl:_hidden _h-0 _w-64 _shrink-0" />
+        <div className="h-0 w-64 shrink-0 max-xl:hidden" />
       )}
       <div
         className={cn(
           "[transition:background-color_1.5s_ease]",
           menu
-            ? "max-md:_bg-black/80 max-md:dark:_bg-black/60 _fixed _inset-0 _z-10"
-            : "_bg-transparent",
+            ? "fixed inset-0 z-10 max-md:bg-black/80 max-md:dark:bg-black/60"
+            : "bg-transparent",
         )}
         onClick={() => setMenu(false)}
       />
       <aside
         className={cn(
-          "nextra-sidebar-container _flex _flex-col",
-          "md:_top-16 md:_shrink-0 motion-reduce:_transform-none motion-reduce:_transition-none",
-          "[.resizing_&]:_transition-none",
-          "_transform-gpu _transition-all _ease-in-out",
-          "print:_hidden",
-          showSidebar ? "md:_w-64" : "md:_w-20",
-          asPopover ? "md:_hidden" : "md:_sticky md:_self-start",
+          "nextra-sidebar-container flex flex-col",
+          "motion-reduce:transform-none motion-reduce:transition-none md:top-16 md:shrink-0",
+          "[.resizing_&]:transition-none",
+          "transform-gpu transition-all ease-in-out",
+          "print:hidden",
+          showSidebar ? "md:w-64" : "md:w-20",
+          asPopover ? "md:hidden" : "md:sticky md:self-start",
           menu
             ? "max-md:[transform:translate3d(0,0,0)]"
             : "max-md:[transform:translate3d(0,-100%,0)]",
@@ -436,8 +435,8 @@ export function Sidebar({
           <OnFocusItemContext.Provider value={setFocused}>
             <div
               className={cn(
-                "_overflow-y-auto",
-                "_p-4 _grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]",
+                "overflow-y-auto",
+                "grow p-4 md:h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]",
                 showSidebar ? "nextra-scrollbar" : "no-scrollbar",
               )}
               ref={sidebarRef}
@@ -447,7 +446,7 @@ export function Sidebar({
                 <Collapse isOpen={showSidebar} horizontal>
                   <Menu
                     // eslint-disable-next-line tailwindcss/no-custom-classname
-                    className="nextra-menu-desktop max-md:_hidden"
+                    className="nextra-menu-desktop max-md:hidden"
                     // The sidebar menu, shows only the docs directories.
                     directories={docsDirectories}
                     // When the viewport size is larger than `md`, hide the anchors in
@@ -459,7 +458,7 @@ export function Sidebar({
               )}
               {mounted && window.innerWidth < 768 && (
                 <Menu
-                  className="nextra-menu-mobile md:_hidden"
+                  className="nextra-menu-mobile md:hidden"
                   // The mobile dropdown menu, shows all the directories.
                   directories={fullDirectories}
                   // Always show the anchor links on mobile (`md`).
@@ -509,7 +508,7 @@ export function SidebarFooter({
         className,
       )}
     >
-      <div className={showSidebar && !hasI18n ? "_grow _flex _flex-col" : ""}>
+      <div className={showSidebar && !hasI18n ? "flex grow flex-col" : ""}>
         <ThemeSwitch lite={!showSidebar} />
       </div>
       {themeConfig.sidebar.toggleButton && (

tailwind.config.ts

@@ -220,6 +220,7 @@ const config: Config = {
       })
     }),
     tailwindMediaHover(),
+    prefersContrastPlugin(),
     scrollStartPlugin(),
     scrollviewFadePlugin(),
     browserPlugin,
@@ -236,6 +237,12 @@ function tailwindMediaHover() {
   })
 }
 
+function prefersContrastPlugin() {
+  return plugin(({ addVariant }) => {
+    addVariant("contrast-more", "@media (prefers-contrast: more)")
+  })
+}
+
 function scrollStartPlugin() {
   return plugin(({ addBase, matchUtilities, theme }) => {
     addBase({