Tailwind Plus agrega soporte para Vanilla JavaScript
(tailwindcss.com)- Los bloques de UI de Tailwind Plus ahora pueden funcionar completamente solo con Vanilla JavaScript
- Ahora es posible usar componentes interactivos sin frameworks como React o Vue
- Se ofrece una nueva librería basada en custom elements llamada @tailwindplus/elements
- Se destaca su facilidad de uso con compatibilidad para diversas plataformas y frameworks
- Todos los clientes de Tailwind Plus pueden usar esta función desde ahora
Tailwind Plus incorpora soporte para Vanilla JavaScript
Muchos bloques de UI de Tailwind Plus (por ejemplo, diálogos, menús desplegables y command palettes) en la práctica requerían JavaScript para poder usarse realmente. Antes, si no usabas React o Vue, tenías que escribir tú mismo el JavaScript para manejar la interacción de estos bloques de UI.
Pero ahora todos los bloques de UI incluyen funcionalidad completa, accesibilidad y elementos interactivos, y funcionan de inmediato incluso en ejemplos con HTML puro. Es decir, ya puedes usar distintos bloques de interfaz como dropdowns, command palettes, dialogs y drawers en cualquier parte de tu proyecto sin depender de un framework de JavaScript.
@tailwindplus/elements: la librería clave
La librería que hace posible este cambio es @tailwindplus/elements. Es un paquete exclusivo para clientes de Tailwind Plus y consiste en una colección de headless custom elements.
- Los custom elements pueden aplicarse en cualquier entorno agregando solo una etiqueta
<script>al HTML - Las interacciones complejas, la gestión del foco, la accesibilidad por teclado y la asignación de atributos ARIA se resuelven automáticamente
- El estilo puede personalizarse libremente con clases utilitarias de Tailwind CSS o con CSS escrito directamente
Ejemplos principales de uso
- Dropdowns: se construyen con custom elements como
<el-dropdown>y<el-menu>, y funcionan sin JavaScript adicional - Select: es posible implementar componentes avanzados de selección con elementos como
<el-select>,<el-options>y<el-option> - Command palette: se implementa con una estructura como
<el-command-palette>y<el-command-list>con funcionalidad completa
Estos custom elements manejan automáticamente atributos ARIA, movimiento de foco y navegación por teclado, ofreciendo un sólido soporte de accesibilidad web.
Integración con frameworks y dependencia mínima de la plataforma
- Puede integrarse no solo en entornos que usan solo HTML, sino también en Svelte, Rails (Ruby on Rails), React y otros
- Ejemplo con Svelte: se muestra cómo agregar enlace bidireccional a
<el-autocomplete> - Ejemplo con Rails: al enviar un formulario, el valor de
<el-select>se envía al servidor igual que un control nativo de formulario - Ejemplo con React: a diferencia de Headless UI o React Aria, puede usarse sin dependencia de framework
Estándares web modernos y compatibilidad con navegadores
- Elements aprovecha activamente funciones modernas de la plataforma web (como Web Components y Custom Elements) para ofrecer una implementación ligera y una experiencia nativa
- Cuando hace falta, también incluye polyfills automáticamente en el bundle para mantener el mismo rango de compatibilidad de navegadores que Tailwind CSS v4
- A medida que los estándares web se adopten más ampliamente, se espera que el tamaño de Elements también se reduzca de forma natural
Verdadera universalidad: "HTML es el mínimo común denominador"
HTML es el "mínimo común denominador" de todos los frameworks web, y con Elements los bloques de UI basados en HTML de Tailwind Plus pueden funcionar de forma consistente en cualquier entorno.
- Se incluyen ejemplos reales de uso y código en Svelte, Rails, React y otros entornos
Lanzamiento y acceso
- Si eres suscriptor de Tailwind Plus, puedes usar de inmediato todos los bloques de UI actualizados y Elements
- Se ofrecen demos por distintas categorías de UI, como dropdowns y command palettes, además de la documentación oficial de Elements
- Puedes personalizarlo de la forma que mejor se ajuste a las necesidades de tu proyecto
Cierre
Ahora, si usas Tailwind Plus, puedes implementar fácilmente una UI potente y accesible en cualquier entorno que quieras, sin tener que escribir JavaScript complejo.
1 comentarios
Comentarios de Hacker News
Al ver nombres de clases de Tailwind largos y jerárquicos como ``, se siente que ahora hay que aprender no solo CSS, sino también otro sistema de estructura jerárquica.
Cada vez que abro un proyecto grande de Tailwind, siempre me impresiona ver una lista enorme de clases en una sola línea.
Antes de Tailwind, todos los diseñadores web con los que me topaba terminaban construyendo un sistema así a su manera. En teoría, CSS es lo bastante potente y todo esto se puede hacer sin Tailwind. Pero en la práctica CSS tiene una gran desventaja: para sacarle todo el jugo, primero hay que diseñar por separado un modelo semántico, y muchos diseñadores suelen enfocarse más en transmitir ambiente y emociones que en la estructura documental o la arquitectura de información. Marcar esos conceptos emocionales con reglas lógicas es muy difícil o imposible. Tailwind no es más que la formalización de algo que ya todo el mundo hacía: en vez de modelar de forma abstracta el “significado”, simplemente usar reglas aplicables de inmediato como
boldored.Me pregunto cómo puede existir alguien que vea este tipo de código y diga: “wow, esto sí que es código limpio”. No entiendo cómo Tailwind se volvió tan popular, y de verdad creo que aprender CSS puro es lo mejor. El CSS de hoy en día ha mejorado muchísimo.
En proyectos reales, las clases se terminan agrupando para que sean más legibles. Por ejemplo:
Se termina programando de esta manera. Ahora lo clasifico manualmente, pero ojalá existiera una herramienta que automatizara este formato.
Tailwind al parecer empezó como un framework CSS estilo utility classes, algo así como un “Bourbon on Steroids”. Pero la gente aceptó los ejemplos mucho más fácilmente de lo esperado, y terminó apilándolos tal cual. En 2018 probé Tailwind en un proyecto grande nuevo, y antes solía apilar utilidades de Tailwind en clases como
.buttono.button-primary, lo que facilitaba el mantenimiento y mantenía limpio el HTML. Pero cuando el equipo lo usó directamente, resultó que simplemente apilar las clases utilitarias predefinidas era mucho más rápido y fácil. Si no te preocupa demasiado la elegancia del código, el diseño se mantiene consistente y se puede implementar exactamente como se ve en Photoshop. Referencia de BourbonEs un enfoque que usa Web Components basados en estándares web. Tiene soporte nativo del navegador, así que funciona sin framework de JS. Da gusto ver que los desarrolladores estén aprovechando más los Web Components. ¿Qué son los Web Components? (MDN)
Es un cambio que llevaba mucho tiempo esperando. Antes jugaba con Web Components en proyectos personales cuando no me importaba tanto la compatibilidad, pero ahora da mucho gusto verlos llegar también a librerías mainstream.
Llevo 12 años diciendo que hacen falta los Web Components, pero del lado de frameworks como React, Angular o Svelte la reacción siempre ha sido tibia. Con web components, JS/TS con alcance limitado y un bundler como vite o rollup basta; no hace falta overhead inútil como Shadow DOM o rerenderizado completo.
Cuando jugué con Polymer por allá de 2014, me llamó la atención el término “transclusion”. En ese momento me pareció curioso, pero ahora ya ni recuerdo bien qué significaba.
Probé usar Web Components en un hook para código de anuncios de la empresa, y en lo personal me decepcionó un poco. Disparar la ejecución del código es fácil, pero la API en sí no me pareció muy buena.
Al ver el mundo de los componentes UI populares, siempre me pregunté por qué la base no era toda “headless”. Los Web Components existen desde hace mucho, así que me parecía raro que este enfoque no fuera más común. Las librerías por framework (como SHADCN, etc.) terminan haciendo documentación separada según compatibilidad de versiones y quedan atadas a entornos específicos, así que en la práctica se sienten menos completas. Parecería mejor construir sobre una base de Headless UI y, si hace falta, hacer wrappers por framework. Claro, sé que hay muchos factores más complejos, pero igual sueño con un mundo así.
Si alguien pudiera financiar lo suficiente al equipo de Tailwind, imagino que el mundo sería mucho mejor porque podríamos recibir gratis todo el ecosistema Tailwind sin preocupaciones de dinero. Da pena que se hayan perdido tantas oportunidades de integración profunda en varios lugares, como Tailwind Plus. Me recuerda a cuando 37signals recibió inversión de Jeff Bezos y quedó libre de preocuparse por VC.
El equipo de Tailwind ya está en una situación muchísimo más exitosa de lo que uno imaginaría. Si quieren crear más cosas y expandirse, no es porque necesiten dinero, sino por una ambición natural. Mi impresión es que Tailwind (open source) es solo una parte del negocio, y también quieren crear otros proyectos que generen ingresos. Se puede comparar con Laravel.
Sinceramente, hoy en día con IA es muy fácil generar componentes Tailwind, así que dan menos ganas de comprar componentes pagados como Tailwind Plus. En la época de Tailwind UI sí llegué a pagar por ello, pero hoy preferiría pedirle directamente a una IA como Claude que me construya la UI, además sin preocuparme por licencias. Tengo curiosidad por ver qué modelo de negocio va a funcionar hacia adelante.
Sobre 37signals, en lo personal a veces pienso que quizá habría sido mejor que los fundadores trabajaran teniendo que rendir cuentas a alguien.
En realidad, “toda la experiencia de Tailwind” ya se ofrece gratis. Me pregunto a qué integración profunda se refieren exactamente. Tailwind Plus (producto comercial) no es más que una colección de plantillas listas para usar y componentes preconstruidos. Es conveniente para desarrolladores que quieren arrancar rápido, pero al final todo se puede construir por cuenta propia con Tailwind sin problema.
Me da curiosidad qué integración específica quieren decir.
Conviene no emocionarse demasiado todavía. Antes también daban soporte para Vue, pero ahora parece que en la práctica lo abandonaron.
Esto precisamente es soporte para Vue. Hay tantos frameworks que hacer wrappers personalizados para todos es casi imposible. Si usas Web Components, desarrollas una vez y funciona en todos los entornos; al final basta con que los frameworks soporten bien Web Components, o dicho de otro modo, HTML.
El soporte de Vue para Web Components es muy bueno, y React 19 por fin también empezó a soportarlos bien. Es cierto que el ecosistema de Web Components es un desastre, pero ofrecer “componentes reutilizables en todos los frameworks” de esta forma sí es la verdadera killer app de los Web Components. Me sorprende que no lo promocionen como “ahora compatible con todos los frameworks” en lugar de “para JavaScript vanilla”.
También tenían una librería de diseño para Figma, pero ya no existe. Es un caso lamentable si quieres colaborar con diseñadores.
Como su nombre lo dice, apunta a tailwindcss.
Me parecía interesante este caso de uso de custom elements, pero en Tailwind esto resulta ser una función de pago, y eso se me hace un poco absurdo. Intuitivamente, esperaría más bien que los custom elements fueran gratis y que la integración con frameworks fuera lo de pago. Política de precios de Tailwind Plus
Esta librería costó alrededor de $250,000 en desarrollo, así que es de pago. Habría sido imposible ofrecerla gratis y además mantenerla; ingenieros talentosos merecen una compensación justa.
Tailwind Plus es una colección de pago de componentes UI y plantillas. TailwindCSS en sí no es más que una herramienta de estilado, como Bootstrap.
Otro ejemplo famoso de función de pago es algo como SSO. No es intuitivamente obvio por qué eso debería ser de pago, pero es una estrategia deliberada para retrasar el momento de tomar la decisión de adopción.
Se siente un poco raro vender este tipo de cosas. En el mundo del desarrollo web, donde lo gratuito suele ser la norma, puede parecer extraño tener que pagar una suscripción para usar un framework de por vida. Sería como si Postgres cobrara una tarifa mensual por uso. Pero al ver la política de precios, parece ser una compra única vitalicia. Me pregunto qué tan bien funcionará ese modelo.
Parece que Alpine.js desapareció de los custom block elements de tailwindcss plus. Me decepcionó ver que alpinejs ya no aparece en los ejemplos de código. Ahora fue reemplazado por algo como esto:
Como alguien que usaba Alpine, da pena ya no poder copiar y pegar esos ejemplos.
Ojalá esta función también estuviera abierta a los usuarios gratuitos de Tailwind. Se ve muy interesante y me gustaría probarla, pero da pena que ni siquiera se pueda experimentar gratis. Aun así, sé que para el open source nunca es fácil conseguir apoyo, así que le agradezco a Tailwind. Algún día me gustaría donar al open source y convertirme en alguien que contribuya.
Dicen que en Elements se pueden hacer cosas como una paleta de comandos avanzada con ``, pero en realidad eso solo es posible porque esa función fue agregada directamente con ese mismo componente.
Últimamente, al usar más Tailwind, he terminado reconociendo sus ventajas en conveniencia y en abstraer lo tedioso de diseñar un sistema de diseño. Pero a largo plazo, invertir directamente en tu propio sistema de diseño y tu propia librería de componentes termina siendo una solución mucho más sólida en términos de DX, flexibilidad, lenguaje estético y dependencias.