Tailwind CSS fue desarrollado inicialmente por Adam Wathan, y la primera versión se lanzó el 1 de noviembre de 2017. Tailwind CSS es un marco CSS de primera utilidad para crear interfaces de usuario personalizadas de manera rápida y eficiente. Es un estilo en línea que se utiliza para lograr una interfaz elegante sin escribir código para su propio CSS. Tailwind CSS ofrece personalización y flexibilidad para transformar la apariencia y la sensación de los elementos. Tailwind CSS no es la primera biblioteca CSS de utilidad, pero es una de las más populares y ligeras. Es un marco CSS de bajo nivel altamente personalizable y proporciona todos los componentes básicos que el desarrollador necesita para crear una interfaz fantástica para cualquier sitio web.
Enlace CDN :
<enlace href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”hoja de estilo”>
Página de muestra hecha con Tailwind CSS :
HTML
<!DOCTYPE html> <html> <head> <!-- Tailwind CSS --> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <title>Tailwind CSS</title> </head> <body style="background-color: gray;"> <!--Card 1--> <div class=" w-full lg:max-w-full lg:flex"> <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white \rounded-b lg:rounded-b-none lg:rounded-r p-4 leading-normal"> <p class="text-gray-700 text-base"> This Card is made using Tailwind CSS. </p> </div> </div> </body> </html>
Producción:
Tarjeta hecha con Tailwind CSS
Bootstrap fue desarrollado por Mark Otto y Jacob Thorton durante una competencia interna en Twitter en agosto de 2011. Es un marco de código abierto que se usa para diseñar sitios web receptivos mejor, más rápido y más fácil. Es un marco de código abierto fácil de usar para principiantes y el más popular que incluye HTML, CSS y JavaScript. Bootstrap se puede usar para crear aplicaciones web con cualquier tecnología del lado del servidor como Java, PHP, etc., y su diseño receptivo permite plataformas como teléfonos móviles, tabletas y computadoras. Bootstrap contiene plantillas de diseño basadas en CSS y JavaScript para tipografía, formularios, botones, navegación, íconos y otros componentes de la interfaz. Se basa en CSS orientado a objetos. Bootstrap ayuda a diseñar y desarrollar plantillas de sitios web rápidamente.
Enlace CDN:
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integridad=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” origen cruzado =”anónimo”>
Página de muestra hecha con BOOTSTRAP:
HTML
<!DOCTYPE html> <html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>BOOTSTRAP</title> </head> <body style="background-color: gray;"> <div class="card"> <div class="card-body"> This Card is made using BOOTSTRAP. </div> </div> </body> </html>
Producción:
Tarjeta hecha con BOOTSTRAP
Diferentes versiones de Bootstrap:
- La versión 2.0 es compatible con el diseño web receptivo.
- La versión 3.0 es compatible con el diseño móvil primero.
- La versión 4.0 introduce la compatibilidad con SASS y Flexbox.
Tailwind CSS vs Bootstrap:
| CSS viento de cola | Oreja |
| Tailwind ofrece widgets prediseñados para crear un sitio desde cero con un desarrollo de interfaz de usuario rápido. | Bootstrap viene con un conjunto de componentes prediseñados adaptables para dispositivos móviles que poseen un kit de interfaz de usuario definido. |
| Tailwind CSS utiliza un conjunto de clases de utilidad para crear una interfaz de usuario ordenada con más flexibilidad y singularidad. | Los sitios creados con Bootstrap siguen el patrón genérico que los hace parecer idénticos. |
| Los sitios web creados con Tailwind CSS son mucho más personalizables. | Los sitios web creados con Bootstrap son conocidos por su capacidad de respuesta y diseño impecable, pero el aspecto es genérico y similar. |
| Tailwind CSS es relativamente más nuevo, y todavía hay mucho espacio para crecer en términos de su comunidad, sin embargo, está creciendo día a día, y la cantidad de usuarios, referencias, herramientas y sitios web relacionados también están aumentando. | Bootstrap es eficiente y ahorra mucho tiempo. Ha existido durante más de nueve años y, al ser el marco CSS más popular, tiene una gran comunidad de desarrolladores, foros, herramientas, etc. |
| Tailwind CSS solo necesita el archivo de hoja de estilo base, que asciende a 27 kb, lo que lo hace más liviano. | Bootstrap tiene cuatro archivos que se deben incluir en su proyecto para obtener el máximo beneficio del Marco CSS. El tamaño total de estos archivos es de 308,25 kb, incluidos jQuery, Popper.js, Bootstrap JS y el archivo CSS principal de Bootstrap. |
| Tailwind CSS es utilizado por BlaBlaCar, Exyplis y Bazzite. | Spotify, Twitter y Lyft son algunas de las empresas famosas que utilizan Bootstrap. |