Next.js y Tailwind: Diseña componentes reactivos sin CSS extra
Aprovecha las clases de Tailwind CSS en Next.js para crear interfaces reactivas y eficientes sin añadir CSS personalizado.
A menudo te encuentras con CSS innecesario que complica el mantenimiento de tus componentes en Next.js.
El truco
// ANTES
<div className="custom-container">
<h1 className="custom-title">Hola Mundo</h1>
<button className="custom-button">Haz clic</button>
</div>
// DESPUÉS
<div className="max-w-md mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">Hola Mundo</h1>
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
Haz clic
</button>
</div>En el ejemplo “ANTES”, usamos clases CSS personalizadas que podrían requerir más definiciones adicionales en un archivo CSS separado. En el ejemplo “DESPUÉS”, aprovechamos las clases utilitarias de Tailwind CSS directamente en nuestros componentes. Esto elimina la necesidad de definir estilos adicionales y permite un diseño más limpio y reactivo, manteniendo todo el estilo en el mismo lugar que la estructura del componente.
Adoptar este enfoque no solo reduce la cantidad de CSS personalizado que necesitas escribir, sino que también hace que la colaboración y el mantenimiento del código sean más eficientes.