Crear constantes en los atributos css y en tailwind

En el punto 2 explicame eso de configuracion mas a detalle

---

En Tailwind CSS, la configuración global se maneja en un archivo llamado tailwind.config.js. Este archivo permite personalizar estilos como colores, tamaños, espaciados y más, para que sean reutilizables en todo el proyecto.

Ejemplo de configuración en tailwind.config.js

Si instalas Tailwind de manera local, puedes personalizarlo así:

module.exports = {

  theme: {

    extend: {

      colors: {

        primario: '#3490dc', 

        secundario: '#ffed4a',

        peligro: '#e3342f',

      },

      spacing: {

        '72': '18rem',

        '84': '21rem',

        '96': '24rem',

      }

    }

  }

}

---

¿Cómo afecta esto en el HTML?

Si defines un color en tailwind.config.js, puedes usarlo como si fuera una clase normal:

<button class="bg-primario text-white px-4 py-2 rounded">

    Botón azul

</button>

Aquí bg-primario usa el color #3490dc, sin necesidad de escribir style="background-color: #3490dc" en cada botón.

Lo mismo ocurre con el espaciado:

<div class="p-72">Esto tiene un padding de 18rem</div>

Aquí p-72 usa el valor definido en spacing.

---

¿Por qué esto es útil?

Si decides cambiar el color primario de azul a rojo, solo editas una vez en tailwind.config.js, y todos los botones cambiarán automáticamente sin modificar el HTML.

Evita tener estilos en línea (style="") que serían difíciles de cambiar si están repetidos en muchos lugares.

Es básicamente una forma centralizada de manejar estilos, algo que en CSS tradicional se haría con variables (--color-primario) o clases (.btn-primary).

________

Eso se hace con css normal personalizar clases

__//

Sí, exactamente. Eso mismo se puede hacer con CSS normal sin necesidad de Tailwind.

En CSS tradicional, definirías clases globales en un archivo .css:

:root {

  --color-primario: #3490dc;

  --padding-boton: 16px;

  --borde-redondeado: 8px;

}

.boton {

  background-color: var(--color-primario);

  color: white;

  padding: var(--padding-boton);

  border-radius: var(--borde-redondeado);

}

Y en el HTML solo usas:

<button class="boton">Botón</button>

---

La diferencia con Tailwind es que en lugar de usar var(--color-primario), usas nombres de clases como bg-primario, pero el concepto es el mismo: personalizar estilos para no repetir código.

Entonces, ¿para qué usar Tailwind?

Lo único que hace es convertir estilos en clases predefinidas, pero no aporta nada que no se pueda hacer con CSS normal.