Tailwind Responsive Design

Tailwind classes can be applied conditionally at different breakpoints. This is achieved by adding prefixes to the utility classes.

Tailwind defines 5 breakpoints by default:

Breakpoint Prefix Default Minimum width EGGER Minimum width CSS
sm 640px - @media (min-width: 640px) { ... }
md 768px - @media (min-width: 768px) { ... }
lg 1024px 1090px @media (min-width: 1090px) { ... }
xl 1280px - @media (min-width: 1282px) { ... }
2xl 1536px 1440px @media (min-width: 1440px) { ... }

Hint

The lg breakpoint was changed to be compatible with the current design.

Currently 2 breakpoints are used by EGGER.

  • no prefix: mobile
  • sm: tablet
  • xl: desktop

Usage

To limit the effects of a utility class to a breakpoint, prefix the utility class with the breakpoint name:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

This can be used with every utility class in the framework.

Mobile First

By default the utility classes address mobile screens first.

This means that unprefixed classes (e.g. w-16) take effect on all screen sizes, while prefixed classes (e.g. md:w-32) only take effect at the specified breakpoint and above.

Warning

A prefix limits the effect on the specified breakpoints and all breakpoints above. So sm:w-8 is applied to all screens with a size of >=640px includeing md, lg, etc.

Targeting a single breakpoint

To limit a utility class to one breakpoint you have to revert its effects on the next larger breakpoint.

<div class="order-1 sm:order-last xl:order-1"> ... </div>

This example limits the effects of order-last to the breakpoint sm.

References