Tailwind UI: Ahora con soporte para React + Vue

El año pasado lanzamos Tailwind UI — un enorme directorio de ejemplos de UI diseñados profesionalmente construidos con Tailwind CSS. Hasta ahora, todos los ejemplos en Tailwind UI han sido puro HTML, que es como el mínimo común denominador para todos los desarrolladores web, y hace posible adaptarlos a cualquier lenguaje de plantillas o framework de JavaScript.

Hoy estamos emocionados de añadir soporte de primera clase para React y Vue 3 a todos los ejemplos en Tailwind UI, lo que hace aún más fácil adaptarlos para tus proyectos.

Ha sido un largo viaje pero estoy súper orgulloso de dónde terminamos en este, y realmente creo que va a hacer de Tailwind UI una herramienta útil para un grupo completamente nuevo de usuarios de Tailwind CSS.

Funcional y accesible

Todos los ejemplos de React y Vue en Tailwind UI están impulsados por Headless UI, que es una biblioteca de componentes que desarrollamos para desacoplar todo el comportamiento complejo de JS que necesitas para construir componentes complejos como modales y menús desplegables de los estilos y el marcado reales.

Headless UI maneja toda la gestión de atributos ARIA, interacciones de teclado, manejo de foco y más por ti, lo que significa que todos los ejemplos de React y Vue proporcionados en Tailwind UI son completamente funcionales, sin necesidad de escribir tú mismo nada de ese complejo JS. Toda esa complejidad desagradable está guardada de forma segura en tu carpeta node_modules donde podemos hacer mejoras y corregir errores en tu nombre, sin que tengas que cambiar tu propio código.

Totalmente personalizable

Con Headless UI, hemos logrado abstraer toda la funcionalidad compleja de JS sin quitarte ningún control sobre el marcado real. Eso significa que todo el diseño sigue estando completamente bajo tu control.

import { useState } from "react";
import { Switch } from "@headlessui/react";
function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}
export default function Example() {
  const [enabled, setEnabled] = useState(false);
  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
      className={classNames(
        enabled ? "bg-indigo-600" : "bg-gray-200",
        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none",
      )}
    >
      <span className="sr-only">Usar configuración</span>
      <span
        aria-hidden="true"
        className={classNames(
          enabled ? "translate-x-5" : "translate-x-0",
          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
        )}
      />
    </Switch>
  );
}

Puedes copiar un ejemplo de React o Vue de Tailwind UI y cambiar absolutamente todo sobre él, desde el radio del borde hasta el padding, las sombras de caja y el tamaño de la fuente, todo simplemente añadiendo clases de utilidad como estás acostumbrado.

Empezar

Si ya eres cliente de Tailwind UI, todo esto está disponible para ti hoy como una actualización totalmente gratuita. Simplemente inicia sesión en tu cuenta, selecciona entre HTML, React o Vue en el menú desplegable sobre cualquier componente, y obtén el código en el formato que desees.

Si aún no has echado un vistazo a Tailwind UI, navega por los componentes de vista previa gratuitos para tener una idea de cómo funciona todo. Es una herramienta increíble para avanzar rápido en una nueva idea de proyecto secundario, encontrar inspiración para una nueva característica que necesitas construir en el trabajo, o aprender cómo implementar un pequeño truco de UI específico con Tailwind, y una excelente manera de apoyar nuestro trabajo en proyectos de código abierto como Tailwind CSS, Headless UI y Heroicons.

¿Quieres echarle un vistazo? Visita el sitio web de Tailwind UI →