Mobile-first responsive utilities with breakpoint prefixes for building adaptive layouts.
📱 Mobile-First Approach:
Thrynd uses a mobile-first methodology. Unprefixed utilities apply to all screen sizes, and responsive prefixes (sm:, md:, lg:, xl:, 2xl:) apply from that breakpoint and up.
Breakpoints
Thrynd includes five responsive breakpoints based on common device sizes.
Prefix
Min-width
Devices
Example
sm:
640px
Large phones, small tablets
sm:w-1/2
md:
768px
Tablets
md:grid-cols-2
lg:
1024px
Laptops, desktops
lg:flex-row
xl:
1280px
Large desktops
xl:grid-cols-4
2xl:
1536px
Extra large screens
2xl:max-w-7xl
Responsive Display
Show or hide elements at different breakpoints.
Responsive Display Classes
📱 Visible on tablets and larger (md:block)
Resize your browser window to see the effect
💻 Visible only on mobile and tablets (lg:hidden)
This disappears on large screens
Responsive Grid
Create adaptive grid layouts that change based on screen size.
Responsive Grid Columns
1
2
3
4
5
6
Responsive Width
Adjust element widths based on breakpoints.
Adaptive Width
w-full md:w-1/2 lg:w-1/3
w-auto lg:w-96
Responsive Flex Direction
Change flex direction at different breakpoints.
Responsive Flexbox
Item 1
Item 2
Item 3
Responsive Text Alignment
Adjust text alignment for different screen sizes.
Adaptive Text Alignment
This text is centered on mobile but left-aligned on large screens.
Left on mobile, right on tablets and up.
Responsive Spacing
Adjust padding and margins at different breakpoints.
Responsive Padding
p-4 on mobile, p-8 on large screens
Centered on tablets and up
Common Patterns
Responsive Navbar
Mobile-First Navigation
Responsive Card Grid
Adaptive Card Layout
Card 1
Content here
Card 2
Content here
Card 3
Content here
Card 4
Content here
Responsive Hero Section
Adaptive Hero
Responsive Hero
Text size and spacing adapt to screen size
Best Practices
Tips for Responsive Design:
Start with mobile styles first (unprefixed utilities)
Add complexity at larger breakpoints progressively
Test on real devices, not just browser resize
Use container class to constrain maximum width
Prefer flexbox and grid over fixed positioning
Consider touch targets (minimum 44x44px) on mobile
Use responsive images with appropriate breakpoints
