TailwindIndicator.tsx

/**
 * A UI component that visually indicates the active Tailwind CSS breakpoint
 * on the screen. It shows a floating indicator in the bottom-right corner of the page,
 * displaying the current breakpoint based on the viewport width.
 *
 * This component is only rendered in development mode (`process.env.NODE_ENV !== 'production'`),
 * helping developers quickly identify the active breakpoint while building responsive layouts.
 *
 * It uses the following breakpoints based on the default Tailwind CSS configuration:
 * - XS (extra small) — `sm:hidden`
 * - SM (small) — `md:hidden`
 * - MD (medium) — `lg:hidden`
 * - LG (large) — `xl:hidden`
 * - XL (extra large) — `2xl:hidden`
 * - 2XL (2x extra large) — No hiding class
 *
 * @see {@link https://www.adamrichardson.dev/blog/tailwind-css-breakpoint-indicator} for a detailed breakdown.
 * @see {@link https://gist.github.com/jonsugar/6bce22bd7d3673294caad36046c2b7cb} for more details on how this was implemented.
 * @see {@link https://chromewebstore.google.com/detail/tailwind-responsive-break/incikpedlilahccgpfpgknfpokibpfij} for a Chrome extension that works similarly.
 */
export const TailwindIndicator = () => {
  return (
    <div className="flex items-center text-sm">
      <svg
        className="inline h-6 w-auto"
        fill="none"
        viewBox="0 0 80 64"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          clipRule="evenodd"
          d="M32 16C24.8 16 20.3 19.6 18.5 26.8C21.2 23.2 24.35 21.85 27.95 22.75C30.004 23.2635 31.4721 24.7536 33.0971 26.4031C35.7443 29.0901 38.8081 32.2 45.5 32.2C52.7 32.2 57.2 28.6 59 21.4C56.3 25 53.15 26.35 49.55 25.45C47.496 24.9365 46.0279 23.4464 44.4029 21.7969C41.7557 19.1099 38.6919 16 32 16ZM18.5 32.2C11.3 32.2 6.8 35.8 5 43C7.7 39.4 10.85 38.05 14.45 38.95C16.504 39.4635 17.9721 40.9536 19.5971 42.6031C22.2443 45.2901 25.3081 48.4 32 48.4C39.2 48.4 43.7 44.8 45.5 37.6C42.8 41.2 39.65 42.55 36.05 41.65C33.996 41.1365 32.5279 39.6464 30.9029 37.9969C28.2557 35.3099 25.1919 32.2 18.5 32.2Z"
          fill="url(#paint0_linear)"
          fillRule="evenodd"
        />
        <defs>
          <linearGradient
            gradientUnits="userSpaceOnUse"
            id="paint0_linear"
            x1="3.5"
            x2="59"
            y1="16"
            y2="48"
          >
            <stop stopColor="#2298BD" />
            <stop offset="1" stopColor="#0ED7B5" />
          </linearGradient>
        </defs>
      </svg>
      <div className="block sm:hidden">XS</div>
      <div className="hidden sm:block md:hidden">SM</div>
      <div className="hidden md:block lg:hidden">MD</div>
      <div className="hidden lg:block xl:hidden">LG</div>
      <div className="hidden xl:block 2xl:hidden">XL</div>
      <div className="hidden 2xl:block">2XL</div>
    </div>
  );
};