Tailwind CSS facilita la creación de diseños responsivos al proporcionar clases utilitarias para puntos de interrupción y consultas de medios.

Puntos de interrupción

Los puntos de interrupción en Tailwind CSS se definen en tamaños de pantalla específicos, lo que permite aplicar diferentes estilos en distintos anchos de vista.

Puntos de interrupción predeterminados

Estos puntos de interrupción pueden utilizarse como prefijos para aplicar estilos condicionalmente según el ancho de la ventana de visualización.

Explicación

1. bg-blue-500: Establece el color de fondo a un tono de azul por defecto;
2. p-4: Añade un relleno de 1rem (16px) en todos los lados;
3. sm:bg-green-500: Establece el color de fondo a un tono de verde en pantallas pequeñas y superiores (min-width: 640px);
4. md:bg-red-500: Establece el color de fondo a un tono de rojo en pantallas medianas y superiores (min-width: 768px);
5. lg:bg-yellow-500: Establece el color de fondo a un tono de amarillo en pantallas grandes y superiores (min-width: 1024px);
6. xl:bg-purple-500: Establece el color de fondo a un tono de púrpura en pantallas extra grandes y superiores (min-width: 1280px).

Aplicación de estilos responsivos

Es posible aplicar estilos responsivos a cualquier clase utilitaria en Tailwind CSS anteponiéndola con un breakpoint.

Explicación

Relleno (Padding):

1. p-4: Añade un relleno de 1rem (16px) en todos los lados por defecto;
2. sm:p-6: Añade un relleno de 1.5rem (24px) en todos los lados para pantallas pequeñas y superiores (min-width: 640px);
3. md:p-8: Añade un relleno de 2rem (32px) en todos los lados para pantallas medianas y superiores (min-width: 768px);
4. lg:p-10: Añade un relleno de 2.5rem (40px) en todos los lados para pantallas grandes y superiores (min-width: 1024px);
5. xl:p-12: Añade un relleno de 3rem (48px) en todos los lados para pantallas extra grandes y superiores (min-width: 1280px).

Tamaño de texto:

1. sm:text-sm: Establece el tamaño de fuente a pequeño (0.875rem o 14px) para pantallas pequeñas y superiores (min-width: 640px);
2. md:text-base: Establece el tamaño de fuente a base (1rem o 16px) para pantallas medianas y superiores (min-width: 768px);
3. lg:text-lg: Establece el tamaño de fuente a grande (1.125rem o 18px) para pantallas grandes y superiores (min-width: 1024px);
4. xl:text-xl: Establece el tamaño de fuente a extra grande (1.25rem o 20px) para pantallas extra grandes y superiores (min-width: 1280px).

Peso de fuente:

1. sm:font-light: Aplica peso de fuente ligero para pantallas pequeñas y superiores (min-width: 640px);
2. md:font-normal: Aplica peso de fuente normal para pantallas medianas y superiores (min-width: 768px);
3. lg:font-semibold: Aplica peso de fuente seminegrita para pantallas grandes y superiores (min-width: 1024px);
4. xl:font-bold: Aplica peso de fuente negrita para pantallas extra grandes y superiores (min-width: 1280px).

Nota

¿Busca información específica sobre capacidad de respuesta? Consulte el siguiente enlace.