TailwindCSS IntelliSense y Prettier para TS/JS

Trabajar con TailwindCSS en archivos TS o JS fuera de TSX puede ser incómodo, por ejemplo al exportar variantes con cva de class-variance-authority. En esos casos se pierde el IntelliSense de Tailwind y tampoco se ordenan las clases con el plugin de Prettier, lo que complica el mantenimiento y aumenta el riesgo de errores.

Qué es la utilidad cn: si usas shadcn ya la conoces. cn es un pequeño helper que combina clsx con tailwind-merge para componer cadenas de clases condicionales y resolver conflictos de utilidades de Tailwind. El resultado es una API limpia para construir estilos que elimina clases duplicadas o incompatibles.

Añade TailwindCSS IntelliSense a archivos TypeScript y JavaScript en VSCode: en tu settings.json agrega la clave tailwindCSS.classFunctions e incluye los identificadores de tus funciones, por ejemplo cva y cn. Con esto el motor de Tailwind reconocerá las clases dentro de esas llamadas y te mostrará sugerencias, validación y resaltado contextual. Recarga la ventana para aplicar los cambios.

En NeoVim: con nvim-lspconfig, configura el servidor tailwindcss e indica en settings la propiedad tailwindCSS.classFunctions con cva y cn. Reinicia el LSP para activar el autocompletado y la detección de clases dentro de tus utilidades.

Compatibilidad con Prettier y ordenación de clases: agrega el plugin prettier-plugin-tailwindcss a tu configuración de Prettier y define tailwindFunctions con cva y cn. De esta forma Prettier podrá ordenar automáticamente las clases de Tailwind dentro de esas funciones en archivos ts y js, alineándolas con tu configuración del framework.

Bonus para utilidades personalizadas: si defines utilidades en tu CSS y no aparecen en el IntelliSense, en lugar de declararlas dentro de la capa utilities con selectores como .bg-gradient o .txt-preset-1, utiliza la directiva @utility, por ejemplo @utility bg-gradient y @utility txt-preset-1. Así se mostrarán en las sugerencias y, además, funcionarán con variantes como hover, focus o prefijos responsivos como lg.

Consejos rápidos: asegúrate de incluir todos tus archivos ts y js en la opción content de la configuración de Tailwind; reutiliza los mismos nombres de helper en todo el proyecto para que el IntelliSense y Prettier puedan reconocerlos; y, si defines nuevos helpers, añádelos tanto a tailwindCSS.classFunctions como a tailwindFunctions.

Sobre Q2BSTUDIO: somos especialistas en desarrollo de software a medida y aplicaciones a medida, con foco en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, además de automatización y agentes IA. Si buscas un partner que entienda tus necesidades técnicas y de negocio, explora nuestro enfoque de software a medida y aplicaciones a medida para acelerar tus proyectos con calidad y escalabilidad.

Nuestro equipo integra IA para empresas en todo el ciclo de vida, desde el descubrimiento hasta la puesta en producción, orquestando modelos, herramientas y flujos de datos con seguridad y observabilidad. Descubre cómo aplicamos modelos generativos, vector search y pipelines de datos en casos reales visitando nuestra página de inteligencia artificial, y potencia tu estrategia con analítica avanzada, power bi y servicios cloud aws y azure de nivel empresarial.