Optimiza tus Componentes React con Tailwind y Framer Motion

Si tus componentes React son lentos y poco atractivos visualmente, es hora de optimizarlos con Tailwind CSS y Framer Motion.

El truco

Mal:

import React from 'react';

function Boton() {
  return (
    <button
      style={{
        backgroundColor: 'blue',
        color: 'white',
        padding: '10px 20px',
        borderRadius: '5px',
        transition: 'all 0.3s ease'
      }}
      onMouseEnter={(e) => {
        e.target.style.backgroundColor = 'darkblue';
      }}
      onMouseLeave={(e) => {
        e.target.style.backgroundColor = 'blue';
      }}
    >
      Haz clic
    </button>
  );
}

Bien:

import React from 'react';
import { motion } from 'framer-motion';

function Boton() {
  return (
    <motion.button
      className="bg-blue-500 text-white py-2 px-4 rounded"
      whileHover={{ scale: 1.1, backgroundColor: '#1D4ED8' }}
      whileTap={{ scale: 0.9 }}
    >
      Haz clic
    </motion.button>
  );
}

Usando Tailwind CSS, eliminas la necesidad de escribir tus estilos en línea, haciendo tu código más limpio y fácil de mantener. Framer Motion añade animaciones fluidas sin esfuerzo, mejorando la experiencia de usuario con solo unas líneas de código. Así reduces el peso de CSS y aceleras el rendimiento.

Pequeños cambios en tu código pueden mejorar drásticamente la eficiencia y apariencia de tus componentes.