Tailwindcss babel macro browser vs. SSR vs build

tailwindcssinjs.jsx

import { css, cx } from '@emotion/css'
import tw from '@tailwindcssinjs/macro'

const styles = {
  link: css(tw`
    text-sm 
    block 
    pb-4 
    font-semibold 
    text-sm 
    sm:text-base 
    border-b-2
    focus:outline-none 
    focus:text-gray-900 
    whitespace-no-wrap
    `
  )
}

const ActiveLink = ({ children, href, className }) => {
  const router = useRouter();
  const activeStyles = css(tw`text-gray-900 border-gray-800`)
  const inactiveStyles = css(tw`text-gray-600 hover:text-gray-700 border-transparent`)

  return (
    <Link href={href} scroll={false}>
      <a
        className = {cx(styles.link, 
          className, 
          router.pathname === href ? activeStyles : inactiveStyles)}
      >
        {children}
      </a>
    </Link>
  );
};

const HMenuLayout = ({ children }) => {
  const itemMargin = css(tw`ml-8`)

  return (
    <div className={css(tw`sticky w-full top-0 shadow bg-white md:bg-opacity-75 px-8 pt-4 leading-none`)}>
      <h1 className={css(tw`w-full text-2xl text-gray-900 font-semibold`)}>Account Settings</h1>

      <div
        className={cx('scrollbar-none', css(tw`w-full mt-6 flex overflow-x-auto`))}
        style={{ boxShadow: "inset 0 0px 0 #edf2f7"}}
      >
        <ActiveLink href="/">
          Basic Information
        </ActiveLink>

        <ActiveLink href="/buttons" className={itemMargin}>
          Profile
        </ActiveLink>

        <ActiveLink href="/account-settings/team-settings" className={itemMargin}>
          Team Settings
        </ActiveLink>

        <ActiveLink href="/account-settings/billing" className={itemMargin}>
          Billing
        </ActiveLink>

        <ActiveLink href="/account-settings/notifications" className={itemMargin}>
          Notifications
        </ActiveLink>

        <ActiveLink href="/account-settings/security" className={itemMargin}>
          Security
        </ActiveLink>
      </div>

      <div>{children}</div>
    </div>
  );
};

export default HMenuLayout;