TwClass AI
TwClass AI es una extensión de Visual Studio Code que convierte reglas CSS en línea (como margin: 20px) en clases de utilidad de TailwindCSS utilizando inteligencia artificial (Gemini de Google).
🚀 Características principales
- Conversión inteligente: Escribe reglas CSS directamente en tus atributos
class o className y obtén sugerencias de clases Tailwind equivalentes
- Potenciado por IA: Utiliza Gemini 2.0 Flash de Google para generar conversiones precisas y contextuales
- Sistema de caché: Guarda automáticamente tus conversiones en un archivo
cache.json local para acelerar futuras sugerencias
- Explicaciones detalladas: Pasa el cursor sobre cualquier clase Tailwind generada para ver:
- La regla CSS original
- Explicación detallada de cada clase
- Origen de la sugerencia (caché, memoria o IA)
- Valores arbitrarios: Soporta valores personalizados de Tailwind con notación de corchetes (ej:
bg-[#333], w-[450px])
- Múltiples lenguajes: Funciona en archivos HTML, JSX y TSX
📋 Requisitos
- Visual Studio Code versión 1.85.0 o superior
- Una clave API válida de Google Gemini (obtenla gratis en Google AI Studio)
🔧 Instalación y configuración
Instala la extensión desde el marketplace de VS Code o desde un archivo .vsix
Configura tu API Key de Gemini:
- Abre la configuración de VS Code (
Ctrl+, o Cmd+,)
- Busca "TwClass AI"
- Ingresa tu clave API de Gemini en el campo "Gemini API Key"
O configúrala mediante JSON:
{
"twclassAi.geminiApiKey": "tu-api-key-aquí"
}
¡Listo! La extensión se activará automáticamente al trabajar con archivos HTML, JSX o TSX
💡 Cómo usar
Uso básico
- Abre un archivo HTML, JSX o TSX
- Dentro de un atributo
class o className, escribe una regla CSS:
<div class="margin: 20px">
- La extensión detectará automáticamente la regla y mostrará sugerencias de clases Tailwind
- Selecciona la sugerencia que prefieras (ej:
m-5, mx-5, etc.)
- La regla CSS se reemplazará automáticamente por la clase Tailwind
Ejemplos de conversión
<!-- Antes -->
<div class="padding: 16px">
<!-- Después -->
<div class="p-4">
<!-- Antes -->
<button class="background-color: #3b82f6">
<!-- Después -->
<button class="bg-blue-500">
<!-- Antes -->
<span class="font-size: 24px">
<!-- Después -->
<span class="text-2xl">
<!-- Antes -->
<div class="display: flex">
<!-- Después -->
<div class="flex">
<!-- Valores personalizados -->
<div class="width: 450px">
<!-- Resultado -->
<div class="w-[450px]">
Ver explicaciones (Hover)
Pasa el cursor sobre cualquier clase Tailwind generada por la extensión para ver:
- La regla CSS original que generó esa clase
- Una explicación detallada de qué hace la clase
- El origen de la sugerencia (caché, memoria o IA)
🗂️ Sistema de caché
La extensión mantiene un sistema de caché inteligente en tres niveles:
- Caché en disco (
cache.json): Persistente entre sesiones de VS Code
- Caché en memoria: Durante la sesión actual para respuestas ultrarrápidas
- Consulta a IA: Solo cuando no existe una conversión cacheada
Cuando aceptas una sugerencia generada por IA, se guarda automáticamente en el caché local, haciendo que futuras conversiones de la misma regla sean instantáneas.
⚙️ Comandos disponibles
- TwClass AI: Guardar selección en caché: Guarda manualmente una conversión en el caché (normalmente se hace automáticamente)
🛠️ Lenguajes soportados
- HTML (
.html, .htm)
- JavaScript React (
.jsx)
- TypeScript React (
.tsx)
- JavaScript (
.js)
🔍 Solución de problemas
No aparecen sugerencias
- Verifica que tu API Key de Gemini esté configurada correctamente
- Asegúrate de estar escribiendo dentro de un atributo
class o className
- Revisa la consola de desarrollo de VS Code (
Help > Toggle Developer Tools) para ver errores
Error al llamar a Gemini
- Verifica que tu API Key sea válida
- Comprueba tu conexión a Internet
- Asegúrate de no haber excedido el límite de consultas de tu API Key
Las sugerencias no son precisas
- La IA aprende de tus selecciones a través del caché
- Puedes modificar manualmente el archivo
cache.json para ajustar las conversiones
📝 Notas
- La extensión utiliza el modelo
gemini-2.0-flash de Google
- Las consultas a la IA se realizan solo cuando no hay resultados en caché
- El archivo
cache.json se crea automáticamente en el directorio de la extensión
- La extensión respeta la configuración de TailwindCSS de tu proyecto
🤝 Contribuir
Si encuentras un bug o tienes una sugerencia, por favor abre un issue en el repositorio de GitHub.
📄 Licencia
Consulta el archivo LICENSE para más información.
¿Te gusta TwClass AI? ⭐ Dale una estrella en GitHub y compártela con otros desarrolladores!
