Skip to content

Latest commit

 

History

History
134 lines (88 loc) · 3.44 KB

README.md

File metadata and controls

134 lines (88 loc) · 3.44 KB

React + TypeScript + Vite + Tailwind CSS

este repositorio proporciona una configuración mínima para que react funcione en vite con typescript y tailwind css. el objetivo principal es mostrar cómo desarrollar una aplicación que muestre videojuegos utilizando estas tecnologías, siguiendo las mejores prácticas de tailwind css para un código limpio, reutilizable y mantenible.

Instalación

seguí estos pasos para empezar:

  1. clona este repositorio:

    git clone <url_del_repositorio>

  2. instalá las dependencias:

    bun install

  3. ejecutá el servidor de desarrollo:

    bun run dev

Mejores prácticas

este proyecto implementa tailwind css siguiendo las mejores prácticas para mantener un diseño consistente, reutilizable y fácil de mantener. a continuación, algunos principios clave aplicados en esta configuración:

1. Clases reutilizables con @apply (usadas moderadamente)

centralizamos estilos comunes, como botones y tarjetas, en un archivo CSS base para evitar duplicación.

.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600;
}
.card {
  @apply bg-gray-800 rounded-lg shadow-md p-4;
}

2. Orden lógico de clases

seguimos un orden coherente en las clases para facilitar la lectura:
layout > display > spacing > border > color > text.

<div className="flex items-center justify-between px-4 py-2 bg-gray-800 text-white rounded-lg shadow">

3. Uso del tema personalizado

configuramos colores y tamaños personalizados en tailwind.config.js para mantener un diseño consistente.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#1E3A8A",
        secondary: "#9333EA",
      },
    },
  },
};

esto asegura que los colores y estilos sean reutilizables y fáciles de ajustar.

4. Variantes para estilos dinámicos

usamos variantes como hover:, focus:, sm: para controlar estilos según el estado o el tamaño de pantalla.

<button className="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
  Click Me
</button>

5. Clases comunes en componentes padres

para estilos compartidos por múltiples elementos hijos, aplicamos las clases en el contenedor padre para evitar redundancia.

<div className="text-white bg-gray-900 p-4">
  <h1 className="text-xl">Title</h1>
  <p className="text-sm">Description</p>
</div>

6. Evitamos clases en línea

los estilos complejos se mueven a clases CSS reutilizables o al padre.

7. Diseño inline-first

priorizamos utilidades de tailwind directamente en el JSX, aprovechando su filosofía inline-first.

8. Utilidades responsivas

se usan prefijos como sm:, md:, lg: para manejar diseños adaptativos.

<div className="text-sm sm:text-base md:text-lg lg:text-xl">
  Responsive Text
</div>

9. Limpieza en producción

el archivo CSS final elimina automáticamente las clases no utilizadas para mantenerlo ligero.

Contribuciones

todas las contribuciones son bienvenidas. para colaborar:

  1. abrí un issue para discutir tu idea.
  2. creá un pull request con tu cambio.

por favor, asegurate de seguir las mejores prácticas mencionadas para mantener la calidad del código.

Licencia

este proyecto está licenciado bajo la licencia MIT, permitiendo su uso y modificación para cualquier propósito.