Responsive Design

In 2025, your users will access your application on:

• A 5-inch phone screen (360×800px) while commuting
• A 10-inch tablet (768×1024px) in a meeting
• A 13-inch laptop (1366×768px) at a desk
• A 27-inch monitor (2560×1440px) in an office

The same application must work well on all of them. Not "technically accessible" — actually well-designed and comfortable to use.

This is responsive design. And Tailwind makes it remarkably straightforward.

Mobile-First Thinking

Tailwind uses a mobile-first approach. This means:

• Classes without a prefix apply to all screen sizes
• Classes with a prefix (sm:, md:, lg:) apply only at that size and above

Reading a class like text-lg md:text-2xl lg:text-3xl: the heading is text-lg (18px) by default (mobile). At medium screens (768px+), it becomes text-2xl (24px). At large screens (1024px+), it becomes text-3xl (30px).

Why mobile-first? Because it is easier to add complexity than remove it. Start with the simplest, most constrained layout (mobile). Layer in enhancements for larger screens. This produces cleaner code than the alternative (start with desktop, try to compress for mobile).

The Breakpoint System

You will use md: and lg: constantly. sm: occasionally. xl: and 2xl: rarely — usually only for marketing pages with very large hero sections.

The Three Most Common Responsive Patterns

Pattern 1: Stacked on mobile, side-by-side on desktop

This is the fundamental pattern. Elements stack vertically on phones, sit horizontally on larger screens.

On mobile: title above, button below. On small screens and up: title left, button right on the same row.

Pattern 2: Single column to multi-column grid

Cards and content grids start as a single column on mobile and expand to multiple columns on larger screens.

Pattern 3: Hide/show on different screen sizes

Responsive Typography

Text does not need to be the same size on every screen. Large display text on a desktop looks dramatic. The same size on a phone makes everything else too small.

A practical rule: hero and page-level headings scale. Card titles, table headers, and body text stay the same across breakpoints.

The Sidebar Problem on Mobile

Admin dashboards have a fundamental mobile challenge. A w-64 (256px) fixed sidebar takes up 71% of a 360px phone screen. There is no room for content.

The standard solution: the sidebar is hidden on mobile and toggled open via a hamburger menu button.

lg:translate-x-0 means: on large screens, always show the sidebar (no transform applied). Below large screens, the sidebar starts at -translate-x-full (off-screen left) and slides in when sidebarOpen is true.

Responsive Tables

Tables are notoriously difficult on mobile — a 5-column table does not fit in 360px.

Three strategies:

Strategy 1: Hide less important columns on small screens

The name cell shows email on mobile (where the email column is hidden) but hides it on sm: and larger (where the email column appears).

Strategy 2: Card layout on mobile, table on desktop

Two completely different UIs for the same data. The mobile version is a stack of cards. The desktop version is a traditional table. Show one or the other based on screen size.

Strategy 3: Horizontal scroll (last resort)

overflow-x-auto lets the container scroll horizontally. min-w-[640px] ensures the table has enough space to render properly. The user scrolls left-right to see all columns. This works, but it is not ideal — prefer strategies 1 or 2 when possible.

The 1366×768 Check

After building any public-facing page or dashboard, check it at exactly 1366×768.

Why this specific size? It is the most common laptop resolution in India — the standard 14-inch laptop sold in the mass market. If you only check at 1920×1080 (a large monitor), you will miss issues that most users in your target market will hit.

Common failures at this size:

• A hero section with very large text that pushes the CTA below the fold
• A sidebar that is too wide, compressing the content area below usability
• A 5-column grid where columns are too narrow to read

Fix: reduce hero padding, shorten text, or use a 4-column grid instead of 5 at this breakpoint.

Responsive Spacing

Padding and gaps also respond to screen size.

The pattern is consistent: smaller values without a prefix (mobile), larger values at lg: (desktop).

Quick Reference: The Patterns You Will Type 100 Times

Summary: The Complete Frontend Toolkit

You now have the complete picture of how the Udyogaseva frontend is built — and how every project in this program will be built:

In the next module, we go to the other side of the application — the backend, where data is stored, secured, and served.