Skip to main content
Sabo is built with a mobile-first approach using Tailwind CSS. This means styles applied without any prefixes target mobile screens, and you add prefixes to apply styles for larger screens.

​
Breakpoints

Tailwind CSS uses a default set of breakpoints. You can customize them, but Sabo uses the standard configuration:
BreakpointMinimum WidthCSS Prefix
sm640px@media (min-width: 640px)
md768px@media (min-width: 768px)
lg1024px@media (min-width: 1024px)
xl1280px@media (min-width: 1280px)
2xl1536px@media (min-width: 1536px)

​
Applying Responsive Styles

To make a design responsive, use breakpoint prefixes with Tailwind’s utility classes. Classes without a prefix apply to all screen sizes (mobile-first), and prefixed classes override the base styles at a specific breakpoint and above. For example, let’s create a layout that is a single column on mobile and a two-column grid on larger screens.
ResponsiveLayout.tsx
export function ResponsiveLayout() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="bg-muted p-4 rounded-lg">Column 1</div>
      <div className="bg-muted p-4 rounded-lg">Column 2</div>
      <div className="bg-muted p-4 rounded-lg">Column 3</div>
    </div>
  );
}
  • grid-cols-1: On mobile (the default), the grid has one column.
  • md:grid-cols-2: On screens 768px and wider, the grid changes to two columns.
  • lg:grid-cols-3: On screens 1024px and wider, it becomes a three-column grid. The lg style will persist for all larger screen sizes (xl, 2xl, etc.) unless overridden.
You can apply these prefixes to any Tailwind utility class, such as lg:text-lg, sm:p-8, md:flex, etc.

​
Responsive Hooks

For more complex responsive logic in your components, Sabo provides two helpful custom hooks.
This hook returns true if the current screen width is less than 768px (the md breakpoint). It’s useful for conditionally rendering different components on mobile vs. desktop.Location: src/hooks/use-mobile.ts
ClientComponent.tsx
"use client";

import { useIsMobile } from "@/hooks/use-mobile";

export function ClientComponent() {
  const isMobile = useIsMobile();

  if (isMobile) {
    return <div>This is the mobile view.</div>;
  }

  return <div>This is the desktop view.</div>;
}
This hook relies on browser APIs (window) and must be used in a Client Component ("use client").
For more granular control, useMediaQuery lets you check against any custom CSS media query. It returns true if the query matches.Location: src/hooks/use-media-query.ts
AdvancedComponent.tsx
"use client";

import { useMediaQuery } from "@/hooks/use-media-query";

export function AdvancedComponent() {
  const isLargeScreen = useMediaQuery("(min-width: 1024px)");

  return (
    <div>
      {isLargeScreen ? (
        <p>You are viewing this on a large screen.</p>
      ) : (
        <p>Your screen is smaller than 1024px.</p>
      )}
    </div>
  );
}