[Beta]Move all possible style to tailwind classes (#4054)

* Move all possible style to tailwind classes

* Update Sidebar.tsx

* fix-collapsable-color

* dry run and commit

* Update SidebarLink.tsx

* Fixes review comments for aria tags

* Remove extended tailwind configs

* Update tailwind.config.js

* Update Sidebar.tsx

beta/src/components/Layout/Page.tsx

@@ -25,9 +25,7 @@ export function Page({routeTree, children}: PageProps) {
 
           <div className="flex flex-1 w-full h-full self-stretch">
             <div className="w-full min-w-0">
-              <main
-                className="flex flex-1 self-stretch flex-col items-end"
-                style={{justifyContent: 'space-around'}}>
+              <main className="flex flex-1 self-stretch flex-col items-end justify-around">
                 {children}
                 <Footer />
               </main>

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -18,7 +18,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
   const {menuRef, isOpen} = React.useContext(MenuContext);
   const isMobileSidebar = useMediaQuery(SIDEBAR_BREAKPOINT);
   let routeTree = React.useContext(SidebarContext);
-  const isHidden = isMobileOnly && !isMobileSidebar;
+  const isHidden = isMobileSidebar ? !isOpen : false;
 
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
@@ -62,14 +62,10 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
   return (
     <aside
       className={cn(
-        `lg:flex-grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-wash dark:bg-wash-dark z-10`,
+        `lg:flex-grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-wash dark:bg-wash-dark z-10 top-0`,
         isOpen ? 'block z-40' : 'hidden lg:block'
       )}
-      aria-hidden={isHidden ? 'true' : 'false'}
-      style={{
-        top: 0,
-        visibility: isHidden ? 'hidden' : undefined,
-      }}>
+      aria-hidden={isHidden}>
       <div className="px-5">
         <Search />
       </div>

beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -3,6 +3,7 @@
  */
 
 import * as React from 'react';
+import cn from 'classnames';
 import {RouteItem} from 'components/Layout/useRouteMeta';
 import {useRouter} from 'next/router';
 import {removeFromLast} from 'utils/removeFromLast';
@@ -59,8 +60,8 @@ function CollapseWrapper({
   return (
     <div
       ref={ref}
+      className={cn(isExpanded ? 'opacity-100' : 'opacity-50')}
       style={{
-        opacity: isExpanded ? 1 : 0.5,
         transition: `opacity ${duration}ms ease-in-out`,
         animation: `nav-fadein ${duration}ms ease-in-out`,
       }}>

beta/src/components/MDX/APIAnatomy.tsx

@@ -101,9 +101,6 @@ export function AnatomyStep({
   const color = colors[stepNumber - 1];
   return (
     <div
-      style={{
-        borderLeftColor: color.hex,
-      }}
       className={cn(
         'border-l-4 rounded-lg px-5 pt-8 pb-2 bg-opacity-5 shadow-inner',
         color.border,

beta/src/components/MDX/Heading.tsx

@@ -27,11 +27,11 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
         {isPageAnchor && (
           <a
             href={`#${id}`}
-            className={anchorClassName}
-            aria-hidden={true}
-            style={{
-              display: Comp === 'h1' ? 'none' : 'inline-block',
-            }}>
+            className={cn(
+              anchorClassName,
+              Comp === 'h1' ? 'hidden' : 'inline-block'
+            )}
+            aria-hidden="true">
             <svg
               width="1em"
               height="1em"

beta/src/components/MDX/Sandpack/Preview.tsx

@@ -100,16 +100,6 @@ export function Preview({
     : null;
   const hideContent = !isReady || error;
 
-  // Allow content to be scrolled if it's too high to fit.
-  // Note we don't want this in the expanded state
-  // because it breaks position: sticky (and isn't needed anyway).
-  // We also don't want this for errors because they expand
-  // parent and making them scrollable is confusing.
-  let overflow;
-  if (!isExpanded && !error && isReady) {
-    overflow = 'auto';
-  }
-
   // WARNING:
   // The layout and styling here is convoluted and really easy to break.
   // If you make changes to it, you need to test different cases:
@@ -136,9 +126,14 @@ export function Preview({
       }}>
       <div
         className={cn(
-          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none'
-        )}
-        style={{overflow}}>
+          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none',
+          // Allow content to be scrolled if it's too high to fit.
+          // Note we don't want this in the expanded state
+          // because it breaks position: sticky (and isn't needed anyway).
+          // We also don't want this for errors because they expand
+          // parent and making them scrollable is confusing.
+          !isExpanded && !error && isReady ? 'overflow-auto' : null
+        )}>
         <div
           style={{
             padding: 'initial',
@@ -151,31 +146,32 @@ export function Preview({
           }}>
           <iframe
             ref={iframeRef}
-            className="rounded-t-none bg-white shadow-md sm:rounded-lg w-full max-w-full"
-            title="Sandbox Preview"
-            style={{
-              height: iframeComputedHeight || '100%',
-              position: hideContent ? 'absolute' : undefined,
+            className={cn(
+              'rounded-t-none bg-white shadow-md sm:rounded-lg w-full max-w-full',
               // We can't *actually* hide content because that would
               // break calculating the computed height in the iframe
               // (which we're using for autosizing). This is noticeable
               // if you make a compiler error and then fix it with code
               // that expands the content. You want to measure that.
-              opacity: hideContent ? 0 : 1,
-              pointerEvents: hideContent ? 'none' : undefined,
+              hideContent
+                ? 'absolute opacity-0 pointer-events-none'
+                : 'opacity-100'
+            )}
+            title="Sandbox Preview"
+            style={{
+              height: iframeComputedHeight || '100%',
               zIndex: isExpanded ? 'initial' : -1,
             }}
           />
         </div>
         {error && (
           <div
-            className="p-2"
-            style={{
+            className={cn(
+              'p-2',
               // This isn't absolutely positioned so that
               // the errors can also expand the parent height.
-              position: isExpanded ? 'sticky' : undefined,
-              top: isExpanded ? '2rem' : '',
-            }}>
+              isExpanded ? 'sticky top-8' : null
+            )}>
             <Error error={error} />
           </div>
         )}

beta/src/components/Search.tsx

@@ -31,8 +31,7 @@ function Hit({hit, children}: any) {
 function Kbd(props: {children?: React.ReactNode}) {
   return (
     <kbd
-      className="border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded"
-      style={{width: '2.25em', height: '2.25em'}}
+      className="h-6 w-6 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded"
       {...props}
     />
   );