Configuración de Tailwind 3: Personalizando tu Sistema de Diseño con flowtitude 🚀

Hoy vamos a sumergirnos en la configuración de Tailwind CSS 3 para personalizar y extender su sistema de diseño predeterminado. 🛠️

Te proporcionaremos dos archivos clave:

1. main.css: Aquí definimos las variables CSS necesarias para adaptar nuestro sistema de diseño.
2. tailwind.config.js: Configuramos los colores personalizados y extendemos los valores básicos de Tailwind.

¿Qué logramos con esta configuración?

• Colores personalizados que amplían los valores por defecto de Tailwind.
• Tipografía y espaciado fluido, garantizando un diseño más adaptable.
• Cuadrículas dinámicas basadas en auto-fit y auto-fill.
• Parámetros básicos para secciones y contenedores.
• Uso del plugin oficial de query containers para una mayor flexibilidad en el diseño responsivo.

Archivo main.css

En este archivo, creamos las variables CSS necesarias para controlar aspectos clave como colores, tipografía, espaciado, etc. Este es a partir del cual debes de personalizar tus proyectos:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Variables para definir las fuentes a utilizar para las clases font-display y font-body */
        --ft-font-body:     'Helvetica', 'Arial';
        --ft-font-display:  'Poppins',  'Helvetica', 'Arial';

        /* Variables para la tipografia fluida */
        --ft-text-xs:   clamp(0.69rem, 0.05vi + 0.68rem, 0.72rem);
        --ft-text-sm:   clamp(0.83rem, 0.12vi + 0.80rem, 0.90rem);
        --ft-text-base: clamp(1.00rem, 0.23vi + 0.94rem, 1.13rem);
        --ft-text-lg:   clamp(1.20rem, 0.38vi + 1.10rem, 1.41rem);
        --ft-text-xl:   clamp(1.44rem, 0.59vi + 1.29rem, 1.76rem);
        --ft-text-2xl:  clamp(1.73rem, 0.86vi + 1.51rem, 2.20rem);
        --ft-text-3xl:  clamp(2.07rem, 1.24vi + 1.76rem, 2.75rem);
        --ft-text-4xl:  clamp(2.49rem, 1.74vi + 2.04rem, 3.43rem);
        --ft-text-5xl:  clamp(2.99rem, 2.40vi + 2.37rem, 4.29rem);
        --ft-text-6xl:  clamp(3.58rem, 3.28vi + 2.74rem, 5.36rem);
        --ft-text-7xl:  clamp(4.30rem, 4.43vi + 3.16rem, 6.71rem);
        --ft-text-8xl:  clamp(5.16rem, 5.93vi + 3.64rem, 8.38rem);
        --ft-text-9xl:  clamp(6.19rem, 7.89vi + 4.16rem, 10.48rem);

        /* Variables para configurar el espaciado fluido */
        --ft-space-4xs: clamp(0.125rem, 0.1042rem + 0.1042vi, 0.1875rem);
        --ft-space-3xs: clamp(0.25rem, 0.2292rem + 0.1042vi, 0.3125rem);
        --ft-space-2xs: clamp(0.5rem, 0.4583rem + 0.2083vi, 0.625rem);
        --ft-space-xs:  clamp(0.75rem, 0.6875rem + 0.3125vi, 0.9375rem);
        --ft-space-sm:  clamp(1rem, 0.9167rem + 0.4167vi, 1.25rem);
        --ft-space-md:  clamp(1.5rem, 1.375rem + 0.625vi, 1.875rem);
        --ft-space-lg:  clamp(2rem, 1.8333rem + 0.8333vi, 2.5rem);
        --ft-space-xl:  clamp(3rem, 2.75rem + 1.25vi, 3.75rem);
        --ft-space-2xl: clamp(4rem, 3.6667rem + 1.6667vi, 5rem);
        --ft-space-3xl: clamp(6rem, 5.5rem + 2.5vi, 7.5rem);
        --ft-space-4xl: clamp(8rem, 7.3333rem + 3.3333vi, 10rem);
        --ft-space-5xl: clamp(9rem, 8.25rem + 3.75vi, 11.25rem);
        --ft-space-6xl: clamp(12rem, 11rem + 5vi, 15rem);
        --ft-space-7xl: clamp(14rem, 12.8333rem + 5.8333vi, 17.5rem);
        --ft-space-8xl: clamp(16rem, 14.6667rem + 6.6667vi, 20rem);

        --ft-space-4xs-3xs: clamp(0.125rem, 0.0625rem + 0.3125vi, 0.3125rem);
        --ft-space-3xs-2xs: clamp(0.25rem, 0.125rem + 0.625vi, 0.625rem);
        --ft-space-2xs-xs:  clamp(0.5rem, 0.3542rem + 0.7292vi, 0.9375rem);
        --ft-space-xs-sm:   clamp(0.75rem, 0.5833rem + 0.8333vi, 1.25rem);
        --ft-space-sm-md:   clamp(1rem, 0.7083rem + 1.4583vi, 1.875rem);
        --ft-space-md-lg:   clamp(1.5rem, 1.1667rem + 1.6667vi, 2.5rem);
        --ft-space-lg-xl:   clamp(2rem, 1.4167rem + 2.9167vi, 3.75rem);
        --ft-space-xl-2xl:  clamp(3rem, 2.3333rem + 3.3333vi, 5rem);
        --ft-space-2xl-3xl: clamp(4rem, 2.8333rem + 5.8333vi, 7.5rem);
        --ft-space-3xl-4xl: clamp(6rem, 4.6667rem + 6.6667vi, 10rem);
        --ft-space-4xl-5xl: clamp(8rem, 6.9167rem + 5.4167vi, 11.25rem);
        --ft-space-5xl-6xl: clamp(9rem, 7rem + 10vi, 15rem);
        --ft-space-6xl-7xl: clamp(12rem, 10.1667rem + 9.1667vi, 17.5rem);
        --ft-space-7xl-8xl: clamp(14rem, 12rem + 10vi, 20rem);

        --ft-space-jumbotron: clamp(9rem, 7rem + 10vi, 15rem);

        /* Variables que definen un borde redondeado para utilziar en los botones, tarjetas o personalizado (rounded-button, rounded-card y rounded-custom) */
        --ft-rounded-button: 0.25rem;
        --ft-rounded-card: 1rem;
        --ft-rounded-custom: 1.5rem;

        /* Variables que definen un grosor de borde para utilziar en los botones, tarjetas o personalizado (border-button, border-card y border-custom) */
        --ft-border-button: 0;
        --ft-border-card:   3px;
        --ft-border-custom: 0.8rem;

        /* Variables para definir el tamaño del content-grid y el espacio adicional (content-wide) */
        --ft-container: 80rem;
        --ft-padding-content-x: clamp(1.5rem, 1.0588rem + 1.9608vw, 2rem);
        --ft-padding-content-y: var(--ft-space-xl);
        --ft-gap-content: var(--ft-space-md);

        /* Variables para definir el tamaño de las utilidades de auto-grid y auto-fit */
        --ft-card-xs: 12rem;
        --ft-card-sm: 14rem;
        --ft-card-md: 18rem;
        --ft-card-lg: 24rem;
        --ft-card-xl: 36rem;
    }
}

@layer components {
}

@layer utilities {
}

Estas variables se conectarán a la configuración de nuestro sistema diseño de forma que puedas hacer los cambios que consideres necesarios para personalizar cada proyecto. En principio las variables que son necesarias modificar es el primer grupo donde definimos la tipografia que vamos a usar. Es recomendable eliminar aquellas variables que no necesites modificar, ya que van incluidas en los plugins que instalamos en el resto de la configuración.

Archivo tailwind.config.js

Configura tus colores personalizados y añade los plugins que necesitas:

export default {
    darkMode: 'class',
    theme: { 
        extend: {
            colors: {
                "primary": {
                    50: "#FFF7EB",
                    100: "#FFF1DB",
                    200: "#FFE0B3",
                    300: "#FFCC80",
                    400: "#FFB647",
                    500: "#FF9900",
                    600: "#E68A00",
                    700: "#C77700",
                    800: "#A86500",
                    900: "#7A4900",
                    950: "#523100"
                },
                "secondary": {
                    50: "#F5F5F9",
                    100: "#ECECF4",
                    200: "#DBDBEB",
                    300: "#C5C5DE",
                    400: "#A7A7CD",
                    500: "#8888BB",
                    600: "#7A7AB3",
                    700: "#6A6AAA",
                    800: "#575799",
                    900: "#3B3B68",
                    950: "#2C2C4E"
                }
            }
        }
    },
    plugins: [
        require('<a data-user_name="flowtitude" class="fcom_mention fcom_route" href="https://flowtitude.com/comunidad/u/flowtitude/">Angel Julian</a>/ft-variables'),
        require('<a data-user_name="flowtitude" class="fcom_mention fcom_route" href="https://flowtitude.com/comunidad/u/flowtitude/">Angel Julian</a>/ft-core'),
        require('@tailwindcss/container-queries'),
    ],
    corePlugins: {
         preflight: false,
    },
}

¿Qué plugins hemos incluido?

1. Variables dinámicas: Integra variables personalizadas basadas en la configuración de Tailwind.
2. Sistema de diseño básico: Añade tipografía y espaciado fluido, cuadrículas dinámicas (auto-fit y auto-fill), y utilidades para secciones y contenedores.
3. Query Containers: Optimiza tu diseño responsivo con el plugin oficial.

Ventajas de esta configuración

💡 Consistencia visual: Usa variables CSS y una base sólida para todos los proyectos.
💡 Escalabilidad: Perfecto para proyectos que evolucionan constantemente.
💡 Flexibilidad: Los plugins permiten una personalización avanzada sin romper la simplicidad de Tailwind.

🎉 Descarga los archivos y comienza ahora mismo desde aquí: Repositorio en Flowtitude