Flowbite es una biblioteca de código abierto de componentes de Tailwind CSS web construida con las clases de utilidad. También incluye elementos interactivos como dropdowns, modales, datepickers.
Tailwind CSS es un framework que he estado usando mucho últimamente en mis proyectos relacionados con la web por lo rápido que es construir las páginas usando las clases de utilidad primero.
Sin embargo, un problema que he encontrado es que el framework no incluye un conjunto básico de componentes para empezar. Así que he tenido que construirlos una y otra vez para cada proyecto.
Pero entonces encontré una biblioteca de componentes basada en Tailwind CSS llamada Flowbite. Viene con los componentes web más utilizados, como botones, barras de navegación, tarjetas, elementos de formularios y otros, que están convenientemente construidos con las clases de utilidad de Tailwind CSS.
Hoy quiero mostrarte cómo puedes empezar a utilizar esta biblioteca y empezar a construir sitios web aún más rápido con Tailwind CSS y los componentes de Flowbite.
El proyecto está disponible en Github y es de código abierto bajo la licencia MIT.
Cómo empezar con Flowbite
En primer lugar, tienes que entender cómo funciona Flowbite. Esta biblioteca no es otro framework. Más bien es un conjunto de componentes basados en el CSS de Tailwind que puedes copiar y pegar desde la documentación.
También incluye un archivo JavaScript que habilita componentes interactivos, como modales, desplegables y selectores de fecha, que puedes incluir opcionalmente en tu proyecto a través de CDN o NPM.
Puedes consultar la guía de inicio rápido para explorar los elementos incluyendo los archivos CDN en tu proyecto. Pero si quieres construir un proyecto con Flowbite te recomiendo que sigas los pasos de las herramientas de construcción para que puedas purgar y minificar el CSS generado.
Para una configuración más rápida incluiremos todo usando un CDN.
Cómo incluir Flowbite y Tailwind CSS vía CDN
Empecemos por incluir el archivo CSS dentro de la etiqueta head de tu HTML:
<link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.min.css" />A continuación, incluye también el archivo JavaScript que habilita los elementos interactivos antes del cierre de la etiqueta body:
<script src="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.bundle.js"></script>Si has seguido estos dos pasos correctamente, ahora deberías tener tanto Tailwind CSS como Flowbite incluidos en tu proyecto y los componentes de Flowbite deberían funcionar ahora.
Explorar los componentes de Flowbite
El siguiente paso es comprobar los componentes de la documentación, que están construidos utilizando las clases de utilidad de Tailwind CSS.
Puedes encontrar desde alertas, botones e insignias hasta barras de navegación, modales, menús desplegables e incluso selectores de fecha.
Aquí tienes la lista completa de componentes:
- Alerts
- Badges
- Breadcrumb
- Buttons
- Button group
- Cards
- Dropdowns
- Forms
- List group
- Typography
- Modal
- Navbar
- Pagination
- Progress bar
- Tables
- Tooltips
- Datepicker
Puedes consultar todos los componentes en la página de inicio y luego serán accesibles desde todas las páginas de la documentación.
Todo lo que tienes que hacer ahora es copiar y pegar el elemento que elijas dentro de tu proyecto y luego utilizarlo de la forma que creas conveniente.
Vamos a crear una página de autenticación de usuarios utilizando los componentes de Flowbite y las clases de utilidad de Tailwind CSS para mostrarte el flujo de trabajo de esta biblioteca.
Así es como quedará al final:
Cómo construir una página de autentificación de usuarios con Flowbite
El primer requisito es incluir Flowbite en la página HTML con la que vas a trabajar, ya sea mediante CDN o NPM. Ya te mostré cómo hacerlo en este artículo, así que asumiré que ya lo has hecho.
Construyamos primero el elemento envolvente al que luego añadiremos el logotipo y el elemento principal de la tarjeta.
<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0">
<!-- content will go here -->
</div>Este elemento asegura que todo estará centrado horizontal y verticalmente en las pantallas más grandes.
Ahora vamos a añadir el logotipo, que es bueno para la marca y en el que los usuarios también pueden hacer clic para volver a la página de inicio.
<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0">
<a href="#" class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
<img src="https://flowbite.com/application-ui/demo/images/logo.svg" class="h-11 mr-4" alt="FlowBite Logo">
<span>Flowbite</span>
</a>
</div>A continuación debemos crear el elemento principal de la tarjeta que viene justo después del logotipo que hemos añadido y también añadir la imagen dentro de la tarjeta.
<div class="bg-white shadow rounded-lg lg:flex items-center justify-center md:mt-0 w-full lg:max-w-screen-lg 2xl:max:max-w-screen-lg xl:p-0">
<div class="hidden lg:flex w-2/3">
<img class="rounded-l-lg" src="https://flowbite.com/application-ui/demo/images/authentication/login.jpg" alt="login image">
</div>
<div class="w-full p-6 sm:p-8 lg:p-16 lg:py-0 space-y-8">
<!-- Authentication form goes here -->
</div>
</div>Si has seguido los pasos correctamente, deberías tener una tarjeta de autentificación vacía con una imagen en su interior y el logotipo arriba.
Cómo utilizar Flowbite Tailwind CSS form element
Aquí es donde entra en juego Flowbite, ya que necesitamos construir un elemento de formulario que incluya dos campos de entrada de texto, una casilla de verificación y un botón. No tenemos que construirlo nosotros mismos porque podemos utilizar los elementos de formulario CSS Tailwind de Flowbite.
Vamos a añadir el siguiente título y el elemento del formulario dentro del segundo elemento div de la tarjeta.
<h2 class="text-2xl lg:text-3xl font-bold text-gray-900">
Sign in to platform
</h2>
<form class="mt-8 space-y-6" action="#">
<div>
<label for="email" class="text-sm font-medium text-gray-900 block mb-2">Your email</label>
<input type="email" name="email" id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="name@company.com" required>
</div>
<div>
<label for="password" class="text-sm font-medium text-gray-900 block mb-2">Your password</label>
<input type="password" name="password" id="password" placeholder=""
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="remember" aria-describedby="remember" name="remember" type="checkbox"
class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" required>
</div>
<div class="text-sm ml-3">
<label for="remember" class="font-medium text-gray-900">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-700 hover:underline ml-auto">Lost Password?</a>
</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-base px-5 py-3 w-full sm:w-auto text-center">Login
to your account</button>
<div class="text-sm font-medium text-gray-500">
Not registered? <a class="text-blue-700 hover:underline">Create account</a>
</div>
</form>El resultado final debe ser así:
¡Enhorabuena! Has construido tu primera página utilizando Tailwind CSS y Flowbite. Imagina lo mucho que te ayudará en tus proyectos el no tener que construir una y otra vez todos los componentes web más utilizados.
Conclusión
Espero que este tutorial te haya ayudado a entender en qué consiste Flowbite y cómo puedes utilizarlo para potenciar y acelerar aún más tu flujo de desarrollo de Tailwind CSS.
También existe una versión pro de Flowbite para aquellos que quieran mejorar aún más su kit de herramientas Tailwind CSS, ya que incluye un kit de diseño Tailwind CSS Figma que puedes utilizar para crear un prototipo del diseño de tu sitio web antes de codificarlo realmente.
También recibirás una gran cantidad de útiles páginas de interfaz de usuario de la aplicación, de marketing y de comercio electrónico que pueden ayudarte a empezar con tus proyectos aún más rápido. Puedes consultar esta tabla comparativa para entender mejor las diferencias entre la versión de código abierto y la versión pro de Flowbite.
