Tailwind CSS es un marco que probablemente haya visto con bastante frecuencia ahora y parece que la tecnología está siendo adoptada por más y más desarrolladores web. Lo que es único acerca de este marco es que utiliza clases de utilidad en lugar de OOCSS o BEM y en lugar de un lenguaje de preprocesamiento CSS, se basa en PostCSS para transformar CSS. Aunque hemos visto un crecimiento bastante espectacular para Tailwind CSS este año (433 % de aumento en las descargas semanales según las tendencias de NPM), una cosa que falta es un conjunto de componentes de interfaz de usuario que se pueden usar para acelerar el proceso de desarrollo. En este artículo, quiero presentarles una de las bibliotecas de componentes más populares basadas en Tailwind CSS y se llama Flowbite. Es un bajo la licencia MIT. proyecto de código abierto disponible en Github Le mostraré cómo comenzar instalando Flowbite como un complemento para Tailwind CSS y le mostraré algunos de los componentes y características que tiene. ¿Qué es Tailwind CSS? es un marco de utilidad primero creado por Adam Wathan que redefine la forma en que interactúa con las hojas de estilo al mover la lógica CSS directamente a su HTML mediante el uso de clases de utilidad para el espaciado, el tamaño, los colores, las fuentes y más. Tailwind CSS Con el lanzamiento del modo JIT, la compilación y la cantidad de clases de utilidad que se pueden usar al desarrollar un proyecto aumentaron significativamente. ¿Qué es Flowbite? es un conjunto de componentes de interfaz de usuario creados con las clases de utilidad de Tailwind CSS, incluidos botones, menús desplegables, modales, pestañas, barras de navegación y más. Puede instalarse a través de NPM e incluirse como un complemento dentro de un proyecto Tailwind CSS nuevo o existente. Flowbite Empezando Lo primero que debe hacer es tener un proyecto Tailwind CSS en funcionamiento instalado localmente. Si aún no lo ha hecho, le recomiendo que consulte la en la documentación. guía de instalación Una vez que haya hecho eso, puede seguir la y aprender cómo descargar e instalar el proyecto. guía de inicio rápido de Flowbite Primero debe instalar el paquete Flowbite a través de NPM: npm i flowbite Luego solicite el complemento dentro del archivo : tailwind.config.js module.exports = { plugins: [ require('flowbite/plugin') ] } Finalmente, asegúrese de que el archivo JavaScript esté incluido justo antes del cierre de su etiqueta : <body <script src="../path/to/flowbite/dist/flowbite.js"></script> Flowbite funciona con las versiones Tailwind CSS v2.x y v3.x. Componentes Tailwind CSS dentro de Flowbite Ahora que tiene un proyecto Tailwind CSS en funcionamiento con Flowbite instalado como complemento, ahora puede comenzar a explorar los de la biblioteca. componentes Tailwind CSS La lista completa de componentes es la siguiente: Alertas Placa Migas de pan Botones Grupo de botones Tarjetas Listas deplegables Formularios Grupos de listas Tipografía modales Pestañas barra de navegación Paginación Barra de progreso Mesas Información sobre herramientas Selector de fechas Aquí hay un ejemplo de un par de : botones de fondo degradado de la biblioteca <button type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Purple to Blue</button> <button type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Cyan to Blue</button> <button type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Green to Blue</button> <button type="button" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Purple to Pink</button> <button type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Pink to Orange</button> <button type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Teal to Lime</button> <button type="button" class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Red to Yellow</button> Como puede ver, todas las clases de estos elementos se basan en las clases de utilidad Tailwind CSS y también se incluye compatibilidad con el modo oscuro. Otro ejemplo serían los elementos desplegables que también requieren que se incluya el archivo JavaScript: <button id="dropdownButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button> <div id="dropdown" class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"> <ul class="py-1" aria-labelledby="dropdownButton"> <li> <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Dashboard</a> </li> <li> <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Settings</a> </li> <li> <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Earnings</a> </li> <li> <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a> </li> </ul> </div> Para el , puede usar el atributo para conectar el menú con el botón usando los detectores de eventos de Flowbite. componente desplegable data-dropdown-toggle=”dropdownId” Te mostraré un ejemplo más de la sección de : componentes del formulario <form> <div class="mb-6"> <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label> <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@flowbite.com" required=""> </div> <div class="mb-6"> <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label> <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required=""> </div> <div class="flex items-start mb-6"> <div class="flex items-center h-5"> <input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required=""> </div> <div class="ml-3 text-sm"> <label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label> </div> </div> <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button> </form> Los componentes del formulario incluyen estilos personalizados y variantes para entradas de texto, casillas de verificación, botones de opción, botones de alternancia, carga de archivos y muchos más. Cómo usar el modo oscuro Todos los componentes de Flowbite ya son compatibles con el modo oscuro y, desde el lanzamiento de Tailwind CSS v3.x, estos estilos se aplicarán automáticamente según las preferencias de su navegador. Si desea crear un conmutador de modo oscuro, puede consultar la guía oficial de Flowbite sobre cómo integrar un . conmutador de modo oscuro con Tailwind CSS Archivos de diseño de Figma Si eres fanático de la herramienta de diseño de software Figma, te alegrará saber que Flowbite también incluye un basado en las clases de utilidad de Tailwind CSS. archivo de diseño de Figma Puede usar este archivo de diseño para crear prototipos y diseñar sus componentes y páginas antes de codificarlos con Tailwind CSS y Flowbite.
