Construir un Todo App con SolidJS es la forma más directa de aplicar la reactividad y el sistema de renderizado del framework en un proyecto real. Aprenderás a configurar Tailwind, depurar actualizaciones reactivas y preparar la base para añadir modo oscuro, manejo de listas y persistencia con local storage.

¿Por qué construir un Todo App con SolidJS?

Un Todo App parece clásico, pero condensa casi todos los conceptos que necesitas dominar para entender cómo funciona la reactividad en frameworks modernos.

A lo largo del proyecto vas a tocar varias áreas clave que se conectan entre sí:

• Implementar un sistema de modo oscuro reactivo, donde elementos como el input respondan al cambio de iluminación.
• Añadir y eliminar tareas dinámicamente para entender cómo se actualiza la UI.
• Depurar desde la consola para observar cómo el sistema reactivo dispara renders.
• Usar efectos secundarios para guardar el estado en el local storage del navegador.

¿Qué aprendes con un Todo App en SolidJS? Aprendes reactividad, renderizado, manejo de eventos, efectos secundarios y persistencia de estado. Es un proyecto pequeño que cubre los pilares del framework.

¿Cómo inicializar un proyecto SolidJS con Tailwind?

La forma recomendada es seguir la guía oficial de Tailwind para SolidJS, que usa la plantilla bit y el comando npx degit para clonar la estructura base [01:46].

Estos son los pasos que vas a ejecutar en tu consola:

1. Copia el comando npx degit que aparece en la guía y asígnale un nombre al proyecto, por ejemplo TodoApp.
2. Entra a la carpeta recién creada con cd TodoApp.
3. Instala las dependencias de Tailwind, que incluyen PostCSS, Autoprefixer y los plugins necesarios.
4. Ejecuta tailwind init para generar el archivo de configuración de Tailwind y PostCSS.

La guía recomienda una configuración específica para proyectos SolidJS, así que cópiala y pégala en tu archivo de configuración tal como viene.

¿Dónde se agregan los estilos base de Tailwind?

Los estilos base van dentro de la carpeta src, en el archivo index.scss (o index.css según tu plantilla). Ahí pegas las directivas de los componentes de Tailwind y queda listo para usarse en cualquier componente del proyecto.

¿Qué hace npx degit en SolidJS? Clona la plantilla oficial sin el historial de Git, dejándote una estructura limpia para empezar a trabajar de inmediato.

¿Cómo limpiar la plantilla inicial de SolidJS?

Una vez que ejecutas npm run dev y abres la URL que te entrega Vite, vas a ver la aplicación de bienvenida típica de Solid. Antes de empezar a construir, conviene dejar el proyecto en blanco.

Estos son los ajustes que harás sobre la plantilla:

• Eliminar el módulo CSS que viene por defecto, porque vas a trabajar solo con clases de Tailwind.
• Quitar la importación de ese módulo dentro de App.jsx.
• Borrar la importación del logotipo que no se usará en el Todo App.
• Pegar la estructura HTML inicial con clases de Tailwind desde el repositorio de recursos del curso [04:32].

El resultado es una interfaz estática construida con HTML y Tailwind. Todavía nada reacciona ni se actualiza; es solo el esqueleto visual sobre el que vas a montar la lógica reactiva.

¿Qué viene después de armar la estructura visual?

Con la base lista, el siguiente paso es darle vida a cada elemento. Vas a conectar el input para crear tareas, manejar listas con primitivas reactivas de Solid, depurar los renders desde la consola y, más adelante, persistir el estado para que tu Todo App recuerde las tareas entre sesiones.

Si llegaste hasta aquí con tu proyecto corriendo en el navegador, cuéntame en los comentarios qué funcionalidad quieres añadir primero: ¿modo oscuro o persistencia con local storage?