Configuración, Spacing (Espaciamiento)

Personalizar el espaciamiento

Utiliza la llave spacing dentro de la sección theme del archivo tailwind.config.js para personalizar la escala o espaciamiento de Tailwind.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        spacing: {
            1: '8px',
            2: '12px',
            3: '16px',
            4: '24px',
            5: '32px',
            6: '48px',
        },
    },
}

Por default el valor de espaciamiento es heredado por padding, margin, width, height, maxHeight, gap, inset, space, translate, scrollMargin y scrollPadding.

Extender el espaciado por default

Como se ha descrito, se puede extender la escala del espaciado, puedes hacer utilizando la sección theme.extend.spacing en el archivo tailwind.config.js.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            spacing: {
                13: '3.25rem',
                15: '3.75rem',
                128: '32rem',
                144: '36rem',
            },
        },
    },
}

Esto generará clases como p-13, m-15 y h-128 al catalogo de clases de espaciado de Tailwind.

Sobreescribir el espaciado por default

Como se ha descrito en la documentación, si se quiere sobreescribir el espaciado por default, se puede hacer utilizando la sección theme.spacing del archivo tailwind.config.js.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        spacing: {
            sm: '8px',
            md: '12px',
            lg: '16px',
            xl: '24px',
        },
    },
}

Esto deshabilitará el espaciado por default de Tailwind y generará clases como p-sm, m-sm, w-lg y h-xl en su lugar.

Valores por default del espaciado

Por default, Tailwind incluye una amplia y sencilla lista de valores para espaciado. Los valores son proporcionales, de forma que 16 es dos veces lo que vale 8. Una unidad de espaciamiento es igual a 0.25rem o 4px.