Configuración, Screens (Pantallas)

Personalizando el objeto screen

Los breakpoints se definen en la sección theme.screens del archivo tailwind.css. Las llaves se convierten en los modificadores, por ejemplo md:text-center y los valores son el ancho mínimo a partir de donde empiezan.

Los breakpoints por default están inspirados en las resoluciones mas comunes.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            sm: '640px',
            // => @media (min-width: 640px) { ... }

            md: '768px',
            // => @media (min-width: 768px) { ... }

            lg: '1024px',
            // => @media (min-width: 1024px) { ... }

            xl: '1280px',
            // => @media (min-width: 1280px) { ... }

            '2xl': '1536px',
            // => @media (min-width: 1536px) { ... }
        },
    },
}

Siéntete libre de utilizar tantos o tan pocos breakpoints como consideres necesario, así como nombrarlos de la forma en que mejor te parezca.

Sobreescribir los valores por default

Para reemplazar los valores por default, agrega valores screen personalizados a la configuración dentro de theme.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            sm: '576px',
            // => @media (min-width: 576px) { ... }

            md: '960px',
            // => @media (min-width: 960px) { ... }

            lg: '1440px',
            // => @media (min-width: 1440px) { ... }
        },
    },
}

Cualquier screen por default que no hayas sobreescrito será removido y no estará disponible en los modificadores de screen.

Agregar un breakpoint mas grande

La forma mas sencilla de añadir un breakpoint es utilizando el key extend.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            screens: {
                '3xl': '1600px',
            },
        },
    },
    plugins: [],
}

Esto añadirá una ventana de resolución adicional a la lista de breakpoints.

Agregar un breakpoint mas pequeño

Si deseas agregar un breakpoint mas pequeño a la lista, no puedes utilizar extend debido a que este nuevo breakpoint sería agregado al final de la lista y los breakpoints están ordenados de menor a mayor, de manera que funcionen con el enfoque de ancho mínimo.

En lugar de sobreescribir completamente screens, utiliza el operador de dispersión.

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    theme: {
        screens: {
            xs: '475px',
            ...defaultTheme.screens,
        },
    },
    plugins: [],
}

De esta forma se utiliza el tema por default tailwindcss/defaultTheme de forma que no tengas que mantener una lista de breakpoints por default.

Utilizar nombres personalizados para los screens

Puedes utilizar los nombres que requieras para los screens, de forma que no estas limitado a utilizar los nombres por default de tailwind (sm, md, lg, xl, 2xl).

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            tablet: '640px',
            // => @media (min-width: 640px) { ... }

            laptop: '1024px',
            // => @media (min-width: 1024px) { ... }

            desktop: '1280px',
            // => @media (min-width: 1280px) { ... }
        },
    },
}

Los modificadores responsivos se verán reflejado como nombres personalizados, de forma que puedas utilizarlos dentro de tu código HTML.

<div
    class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4"
>
    <!-- ... -->
</div>

Configuración Avanzada

Por defecto, los puntos de quiebre son min-width para fomentar un flujo de trabajo centrado en dispositivos móviles. Si necesitas más control sobre tus media queries, también puedes definirlas utilizando una sintaxis de objeto que te permite especificar valores explícitos de min-width y max-width.

Breakpoints max-width

Si deseas trabajar con breakpoints max-width en lugar de min-width, puedes especificar tus objetos screens como objetos con la llave max.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            '2xl': { max: '1535px' },
            // => @media (max-width: 1535px) { ... }

            xl: { max: '1279px' },
            // => @media (max-width: 1279px) { ... }

            lg: { max: '1023px' },
            // => @media (max-width: 1023px) { ... }

            md: { max: '767px' },
            // => @media (max-width: 767px) { ... }

            sm: { max: '639px' },
            // => @media (max-width: 639px) { ... }
        },
    },
}

Asegúrate de que la lista de breakpoints max-width se encuentren en forma ascendente de forma que cada uno pueda ser sobrescrito por otro.

Breakpoints con rango fijo

Si deseas que tus breakpoints especifiquen un min-width y max-width, utiliza min y max en conjunto.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            sm: { min: '640px', max: '767px' },
            // => @media (min-width: 640px and max-width: 767px) { ... }

            md: { min: '768px', max: '1023px' },
            // => @media (min-width: 768px and max-width: 1023px) { ... }

            lg: { min: '1024px', max: '1279px' },
            // => @media (min-width: 1024px and max-width: 1279px) { ... }

            xl: { min: '1280px', max: '1535px' },
            // => @media (min-width: 1280px and max-width: 1535px) { ... }

            '2xl': { min: '1536px' },
            // => @media (min-width: 1536px) { ... }
        },
    },
}

A diferencia de los breakpoints min-width y max-width, los breakpoints que se definen de esta forma solo tendrán efecto cuando el tamaño del viewport es explícitamente dentro de este rango.

Breakpoints de rango múltiple

En algunas ocasiones se hace necesario tener un breakpoint que aplique a diferentes rangos.

Por ejemplo, supongamos que tienes una barra lateral y deseas que tus puntos de quiebre se basen en el ancho del área de contenido en lugar de toda la ventana gráfica. Puedes simular esto haciendo que uno de tus puntos de quiebre retroceda a un punto de quiebre más pequeño cuando la barra lateral se haga visible y reduzca el área de contenido:

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        screens: {
            sm: '500px',
            md: [
                // La barra lateral aparece en 768px, por lo que se vuelven a aplicar los estilos de `sm:` entre 768px
                // y 868px, después de lo cual el área de contenido principal vuelve a ser lo suficientemente ancha como para
                // aplicar los estilos de `md:`.
                { min: '668px', max: '767px' },
                { min: '868px' },
            ],
            lg: '1100px',
            xl: '1400px',
        },
    },
}

Este código representa una configuración de Tailwind CSS donde se definen puntos de quiebre (breakpoints) personalizados para diferentes tamaños de pantalla.

Media queries personalizados

Si deseas tener control absoluto del media query generado, utiliza la llave key:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            screens: {
                tall: { raw: '(min-height: 800px)' },
                // => @media (min-height: 800px) { ... }
            },
        },
    },
}

Las media queries definidas utilizando la clave raw se generarán tal como están, y las claves “min” y “max” se ignorarán.