Update

resources/js/components/custom/use-tailwind-breakpoint.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+// Hardcoded breakpoints based on your Tailwind config
+const breakpoints = {
+    xxxxs: 0,
+    xxxs: 275,
+    xxs: 320,
+    xs: 475,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1400,
+};
+
+const getCurrentBreakpoint = () => {
+    if (typeof window === 'undefined') return null; // Handle SSR
+
+    const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);
+
+    return sortedBreakpoints.find(([_, width]) => window.innerWidth >= width)?.[0] || 'xxs';
+};
+
+const useTailwindBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState(null);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setBreakpoint(getCurrentBreakpoint());
+        };
+
+        handleResize(); // Set initial breakpoint
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return breakpoint;
+};
+
+export default useTailwindBreakpoint;