Curso gratuito de Tailwind CSS

Tailwind Demos

// responsive · breakpoints y mobile-first

Responsive Design

Tailwind es mobile-first: las clases sin prefijo aplican a todos los tamaños. Los prefijos sm: md: lg: aplican desde ese breakpoint hacia arriba.

sm: ≥640px md: ≥768px lg: ≥1024px xl: ≥1280px 2xl: ≥1536px
breakpoint activo: base (mobile) ← redimensiona la ventana

Demo en vivo — redimensiona para ver cambios

grid cols responsivo

grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

card 1
card 2
card 3
card 4

visibilidad por breakpoint

Solo visible en mobile (sm:hidden)

tamaño de texto responsivo

text-base → sm:lg → md:xl → lg:3xl

layout que cambia de flex-col a flex-row

sidebar
main content

flex-col md:flex-row

spacing responsivo

p-4 sm:p-6 md:p-8 lg:p-12

el padding crece con la pantalla

Código importante

<!-- MOBILE FIRST: base = mobile -->
<!-- sm: md: lg: xl: se aplican ↑ desde ese bp -->

<!-- Breakpoints por defecto -->
<!-- sm:  640px  md:  768px         -->
<!-- lg: 1024px  xl: 1280px  2xl: 1536px -->

<!-- Columnas responsivas -->
<div class="grid
       grid-cols-1
       sm:grid-cols-2
       lg:grid-cols-4"></div>

<!-- Mostrar / ocultar -->
<div class="hidden md:block"></div>
<div class="md:hidden"></div>

<!-- Tipografía responsiva -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
</h1>

<!-- Flex que cambia de dirección -->
<div class="flex flex-col md:flex-row"></div>

<!-- Padding responsivo -->
<div class="p-4 sm:p-6 md:p-8 lg:p-12"></div>

<!-- Cualquier utilidad acepta prefijo -->
<div class="bg-slate-900 md:bg-slate-800"></div>
<div class="rounded md:rounded-xl"></div>
<div class="w-full lg:w-1/2"></div>

<!-- tailwind.config.js: breakpoints custom -->
// theme: { screens: { 'tablet': '640px', 'laptop': '1024px' } }