Create Custom Breakpoint and Indicator for TailwindCSS

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    screens: {
      xs: '480px',
      ...defaultTheme.screens,
    },
  },
}

---
const isProduction = import.meta.env.PROD
---

{
  !isProduction && (
    <div class="fixed bottom-4 right-4 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-red-600 p-3 font-mono text-xs font-bold text-white">
      <div class="block sm:hidden">xs</div>
      <div class="hidden sm:block md:hidden">sm</div>
      <div class="hidden md:block lg:hidden">md</div>
      <div class="hidden lg:block xl:hidden">lg</div>
      <div class="hidden xl:block 2xl:hidden">xl</div>
      <div class="hidden 2xl:block">2xl</div>
    </div>
  )
}