Tailwind Easy HTML

Tailwind CSS, sin complicaciones.

Una extensión para Visual Studio Code con 325 snippets de HTML y Tailwind CSS, documentación en español, autocompletado inteligente y herramientas para mantener tu código limpio y legible.

🚧 Beta: Este proyecto sigue en desarrollo. Algunas funcionalidades pueden cambiar o presentar errores.

☄️ ¿Cómo nació este proyecto?

Tailwind Easy HTML nació de una necesidad personal: quería desarrollar páginas web, pero aprender CSS y recordar todas sus propiedades se me hacía complicado.

Después de explorar CSS, SCSS y Tailwind, decidí crear una herramienta que me permitiera trabajar directamente desde HTML y aprender mientras programaba.

Lo que empezó como una búsqueda de un CSS «con esteroides» —y algún que otro asteroide— terminó convirtiéndose en esta extensión.

Este proyecto está desarrollado mediante vibe coding, utilizando inteligencia artificial como herramienta de apoyo para programar, experimentar y resolver problemas reales.

No pretende sustituir el aprendizaje de CSS, sino hacerlo más accesible, visual y práctico.

✨ Funcionalidades

⚡ 325 snippets inteligentes

Una colección de snippets HTML con clases de Tailwind CSS, organizados por categorías y acompañados de descripciones en español.

Incluye botones, formularios, inputs, colores, layouts, componentes, animaciones y mucho más.

Algunos ejemplos:

Los snippets incluyen parámetros editables con Tab, iconos según su categoría y vistas previas del código.

📦 Compact

¿Demasiadas clases Tailwind en una sola línea?

Compact oculta visualmente los atributos class extensos y muestra un pequeño indicador con el número de clases.

Características:

• Compactación automática cuando se supera el umbral configurado.
• Desplegar y plegar las clases mediante un indicador interactivo.
• Edición directa del código original al desplegarlo.
• Explicaciones de las clases, organizadas por categorías, al pasar el ratón.
• Vista previa visual del elemento utilizando Tailwind CSS 4.
• Posibilidad de activar o desactivar Compact.

Compact no elimina ni modifica las clases originales al plegarlas. Tu código HTML permanece intacto.

Configuración disponible:

La vista previa utiliza el CDN de Tailwind CSS 4 y requiere conexión a Internet.

🚀 Instalación

Puedes instalar la versión beta mediante un archivo .vsix.

1. Abre Visual Studio Code.
2. Accede a Extensiones (Ctrl + Shift + X).
3. Abre el menú de los tres puntos.
4. Selecciona Install from VSIX...
5. Selecciona el archivo de Tailwind Easy HTML.

Requisito: Visual Studio Code 1.138.0 o superior.

💻 Uso

Abre cualquier archivo HTML y comienza a escribir uno de los prefijos disponibles.

Por ejemplo, escribe boton-ro y pulsa Ctrl + Espacio. Selecciona boton-rojo para insertar el componente completo.

Utiliza Tab para desplazarte entre los parámetros editables.

Para utilizar Compact, abre la paleta de comandos (Ctrl + Shift + P) y busca Tailwind Easy HTML.

La extensión está diseñada para convivir con el autocompletado nativo de HTML y Emmet.

🛠️ Desarrollo

El proyecto está desarrollado con JavaScript y la API oficial de extensiones de Visual Studio Code.

Para instalar las dependencias:

npm install

Para ejecutar las comprobaciones:

npm run lint
npm run check
npm test

Para probar la extensión, abre el proyecto y selecciona Run Extension en el panel Ejecutar y depurar.

Para generar el instalador:

npx @vscode/vsce package

⚠️ Estado del proyecto

Tailwind Easy HTML se encuentra en fase beta. Se desarrolla de forma experimental, por lo que pueden aparecer errores o cambios de comportamiento entre versiones.

Los snippets que utilizan el CDN de Tailwind CSS están destinados principalmente al desarrollo y la creación de prototipos.

❤️ Sobre el proyecto

Este proyecto demuestra cómo una necesidad personal puede convertirse en una herramienta útil mediante la experimentación, el aprendizaje y la inteligencia artificial.

Creado con curiosidad, mucho vibe coding y demasiadas clases de Tailwind. ☄️