Capa

Foundations

3 refs

Escala

Base
sin prefijo

Se activa desde 0px

Referencia: 0rem

Uso común

Mobile first

sm
sm:

Se activa desde 640px

Referencia: 40rem

Uso común

Móvil amplio

md
md:

Se activa desde 768px

Referencia: 48rem

Uso común

Tablet

lg
lg:

Se activa desde 1024px

Referencia: 64rem

Uso común

Laptop

xl
xl:

Se activa desde 1280px

Referencia: 80rem

Uso común

Desktop

2xl
2xl:

Se activa desde 1536px

Referencia: 96rem

Uso común

Desktop ancho

Responsive App

Base 0pxsm 640pxmd 768pxlg 1024pxxl 1280px2xl 1536px
Viewport: --
Breakpoint activobase

Base

sin prefijo

sm

sm:

md

md:

lg

lg:

xl

xl:

2xl

2xl:

Base 0pxsm 640pxmd 768pxlg 1024pxxl 1280px2xl 1536px

Mobile

< 640px

CTA
Secondary

Tablet

>= 768px

CTA
Secondary

Desktop

>= 1024px

CTA
Secondary

Patrones

Stack -> columnas

grid-cols-1 md:grid-cols-2 xl:grid-cols-4

Para cards o stats que arrancan apiladas y ganan densidad en desktop.

Desde

md / xl

Mostrar sidebar

hidden lg:block

Para paneles secundarios que estorban en mobile pero suman contexto en laptop.

Desde

lg

Aire lateral

px-4 md:px-6 lg:px-8

Para que una page respire distinto en mobile, tablet y desktop sin cambiar la estructura.

Desde

md / lg

Escala tipográfica

text-2xl md:text-4xl xl:text-5xl

Para hero titles o headings que necesitan crecer con el viewport.

Desde

md / xl