8,084 lecturas

Cómo comenzar con Flowbite, una biblioteca de componentes CSS de Tailwind de código abierto

por Zoltán Szőgyényi2021/12/22

Demasiado Largo; Para Leer

Flowbite es un conjunto de componentes de interfaz de usuario basados en Tailwind CSS que se pueden utilizar para acelerar el proceso de desarrollo. 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. Flowbite funciona con las versiones CSS v2x y v3x dentro de Flowbite. La lista completa de componentes de Flowbite está disponible en Github y se puede instalar a través de NPM e incluir como complemento dentro de un proyecto de CSS de viento de cola nuevo o existente.

Companies Mentioned

featured image - Cómo comenzar con Flowbite, una biblioteca de componentes CSS de Tailwind de código abierto

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 proyecto de código abierto disponible en Github bajo la licencia MIT.

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?

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.

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?

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.

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 guía de instalación en la documentación.

Una vez que haya hecho eso, puede seguir la guía de inicio rápido de Flowbite y aprender cómo descargar e instalar el proyecto.

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 componentes Tailwind CSS de la biblioteca.

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 componente desplegable , puede usar el atributo data-dropdown-toggle=”dropdownId” para conectar el menú con el botón usando los detectores de eventos de Flowbite.

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="[email protected]" 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 archivo de diseño de Figma basado en las clases de utilidad de Tailwind CSS.