En este artículo, sabremos cómo usar Bootstrap con Tailwind CSS, en un momento, en el mismo código. Podemos usar ambos marcos CSS juntos, pero no se recomienda. Porque pocas clases se contradirán entre sí como «contenedor», «clearfix», etc. Como sabemos, Bootstrap es un marco CSS conocido. Aunque el marco Tailwind CSS también se puede usar en paralelo en comparación con Bootstrap . Tailwind CSS es básicamente un marco CSS de primera utilidad que facilita la creación rápida de interfaces de usuario personalizadas. Entonces, en el campo del desarrollo, está más familiarizado con Tailwind que con Bootstrap. Hay diferencias significativas en Tailwind CSS vs Bootstrap .
Supongamos que hay un sitio web preconstruido donde los antiguos desarrolladores han usado Bootstrap y los nuevos desarrolladores quieren usar Tailwind. En ese caso, el nuevo desarrollador debe tener cuidado con las clases de Bootstrap utilizadas, donde las clases no deben contradecirse entre sí. Usaremos los siguientes enlaces de CDN en el ejemplo de código para usar las diversas clases de CSS de Bootstrap y Tailwind aplicables, y utilizarlas en una sola página.
Enlace CDN Bootstrap:
<enlace rel=”hoja de estilo” href=“ https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=“ https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=“ https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=“ https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Tailwind CSS CDN Enlace:
<enlace href=“ https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”hoja de estilo”>
Ejemplo: En este ejemplo, usaremos Bootstrap para la alineación del contenido, y para el texto y el color de fondo, usaremos Tailwind CSS. Así que ambos marcos serán aplicables.
HTML
<!DOCTYPE html> <html> <head> <!-- Bootstrap CDN Links --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> <!-- Tailwind CSS CDN Links --> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <!-- Bootstrap Class --> <div class="col"> <div class="col-md-4"> <!-- Tailwind CSS Class --> <p class="bg-purple-300 p-2"> <b class="text-green-700">GeeksforGeeks</b> <br>This example illustrates the use of Bootstrap and Tailwind side by side. </p> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA