Si les gusta el smoth scrolling, asi se agrega usando tailwind:
<html class="scroll-smooth"> ... </html>
Así al hacer clic en los links el scroll será continuo y no instantaneo.
Conociendo Tailwind CSS
Bienvenida al desarrollo con Tailwind
Tailwind 3.0: ¿qué hay de nuevo?
¿Cómo funciona Tailwind? Y otros frameworks de CSS
Mobile First y Utility First
Instalación y directivas
Creación del proyecto e instalación de Tailwind
Directivas de Tailwind
Utilidades
Nueva paleta de colores extendida
Medidas y Breakpoints
Flexbox
Maquetación del proyecto
Plugins
Forms, Typography y Aspect ratio
Personalización
Tailwind como API para la creación de un Design System
Proyecto: Platzi Travel
Construyendo el cuerpo del proyecto
Creando la sección de Home
Diseñando nuestras cards
Extracción de componentes a clases para nuestra card
Creando la sección de Recomendados
Agregando animaciones al proyecto
Creando la sección de Rentas destacadas
Sección de FAQS
Footer
TabBar funcional
Haciendo responsivo nuestro proyecto
Haciendo responsivo nuestro proyecto: rentas destacadas
Creando la navbar
Agregando el Dark Mode
Optimización de nuestro proyecto
Purge CSS
Cómo hacer la migración de tu proyecto a Tailwind 3.0
Conclusiones
Conclusiones y siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
12 Días
23 Hrs
49 Min
23 Seg
TabBar funcional
22/29Recursos
Aportes 21
Preguntas 2
Ordenar por:
En éste video, la parte donde se muestra el tab bar está oculta por el circulo donde está Ana María. Sólo es una recomendación a tener en cuenta para algún video similar.
Mi tab bar:
<div class="w-full h-16 bg-white fixed left-0 bottom-0 shadow-md flex items-center justify-around" id="tab_bar">
<a href="#home">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="">
<path class="fill-current text-gray-200" d="M10.707 2.29303C10.5195 2.10556 10.2652 2.00024 10 2.00024C9.73488 2.00024 9.48057 2.10556 9.29304 2.29303L2.29304 9.29303C2.11088 9.48163 2.01009 9.73423 2.01237 9.99643C2.01465 10.2586 2.11981 10.5094 2.30522 10.6948C2.49063 10.8803 2.74144 10.9854 3.00364 10.9877C3.26584 10.99 3.51844 10.8892 3.70704 10.707L4.00004 10.414V17C4.00004 17.2652 4.1054 17.5196 4.29293 17.7071C4.48047 17.8947 4.73482 18 5.00004 18H7.00004C7.26526 18 7.51961 17.8947 7.70715 17.7071C7.89468 17.5196 8.00004 17.2652 8.00004 17V15C8.00004 14.7348 8.1054 14.4805 8.29293 14.2929C8.48047 14.1054 8.73482 14 9.00004 14H11C11.2653 14 11.5196 14.1054 11.7071 14.2929C11.8947 14.4805 12 14.7348 12 15V17C12 17.2652 12.1054 17.5196 12.2929 17.7071C12.4805 17.8947 12.7348 18 13 18H15C15.2653 18 15.5196 17.8947 15.7071 17.7071C15.8947 17.5196 16 17.2652 16 17V10.414L16.293 10.707C16.4816 10.8892 16.7342 10.99 16.9964 10.9877C17.2586 10.9854 17.5095 10.8803 17.6949 10.6948C17.8803 10.5094 17.9854 10.2586 17.9877 9.99643C17.99 9.73423 17.8892 9.48163 17.707 9.29303L10.707 2.29303Z" fill="#3F3F46"/>
</svg>
</a>
<a href="#rentas_destacadas">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="">
<path class="fill-current text-primary" fill-rule="evenodd" clip-rule="evenodd" d="M8 3.99997C6.93913 3.99997 5.92172 4.4214 5.17157 5.17155C4.42143 5.92169 4 6.93911 4 7.99997C4 9.06084 4.42143 10.0783 5.17157 10.8284C5.92172 11.5785 6.93913 12 8 12C9.06087 12 10.0783 11.5785 10.8284 10.8284C11.5786 10.0783 12 9.06084 12 7.99997C12 6.93911 11.5786 5.92169 10.8284 5.17155C10.0783 4.4214 9.06087 3.99997 8 3.99997ZM2 7.99997C1.99988 7.05568 2.22264 6.12468 2.65017 5.28271C3.0777 4.44074 3.69792 3.71157 4.4604 3.1545C5.22287 2.59743 6.10606 2.22819 7.03815 2.07681C7.97023 1.92543 8.92488 1.99618 9.82446 2.28332C10.724 2.57046 11.5432 3.06587 12.2152 3.72927C12.8872 4.39266 13.3931 5.20531 13.6919 6.10111C13.9906 6.9969 14.0737 7.95056 13.9343 8.88452C13.795 9.81848 13.4372 10.7064 12.89 11.476L17.707 16.293C17.8892 16.4816 17.99 16.7342 17.9877 16.9964C17.9854 17.2586 17.8802 17.5094 17.6948 17.6948C17.5094 17.8802 17.2586 17.9854 16.9964 17.9876C16.7342 17.9899 16.4816 17.8891 16.293 17.707L11.477 12.891C10.5794 13.5293 9.52335 13.9081 8.42468 13.9861C7.326 14.0641 6.22707 13.8381 5.2483 13.3329C4.26953 12.8278 3.44869 12.063 2.87572 11.1223C2.30276 10.1816 1.99979 9.10141 2 7.99997Z" fill="#3F3F46"/>
</svg>
</a>
<a href="#recomendados">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="">
<path class="fill-current text-gray-200" fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.17202C3.92211 4.42214 4.93934 4.00087 6 4.00087C7.06066 4.00087 8.07789 4.42214 8.828 5.17202L10 6.34302L11.172 5.17202C11.541 4.78998 11.9824 4.48525 12.4704 4.27561C12.9584 4.06598 13.4833 3.95563 14.0144 3.95102C14.5455 3.9464 15.0722 4.04761 15.5638 4.24873C16.0554 4.44986 16.502 4.74687 16.8776 5.12244C17.2532 5.49801 17.5502 5.94462 17.7513 6.4362C17.9524 6.92779 18.0536 7.45451 18.049 7.98562C18.0444 8.51674 17.934 9.04162 17.7244 9.52964C17.5148 10.0177 17.21 10.459 16.828 10.828L10 17.657L3.172 10.828C2.42212 10.0779 2.00085 9.06068 2.00085 8.00002C2.00085 6.93936 2.42212 5.92213 3.172 5.17202Z" fill="#3F3F46"/>
</svg>
</a>
<button>
<svg width="30" height="30" viewBox="0 0 29 29" fill="none" xmlns="">
<path d="M25.0748 19.2748C22.9267 20.2465 20.5334 20.5405 18.214 20.1177C15.8945 19.6949 13.7589 18.5753 12.0918 16.9082C10.4246 15.241 9.30509 13.1055 8.88228 10.786C8.45946 8.46654 8.75347 6.0733 9.72512 3.92514C8.01494 4.69801 6.51777 5.87422 5.36208 7.35288C4.20638 8.83154 3.42666 10.5685 3.08979 12.4147C2.75293 14.261 2.86898 16.1614 3.428 17.9529C3.98702 19.7444 4.97232 21.3736 6.29935 22.7006C7.62639 24.0276 9.25556 25.0129 11.0471 25.572C12.8386 26.131 14.739 26.247 16.5852 25.9102C18.4315 25.5733 20.1684 24.7936 21.6471 23.6379C23.1257 22.4822 24.302 20.985 25.0748 19.2748V19.2748Z" fill="#CC2D4A"/>
</svg>
</button>
<a href="#">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="">
<path class="fill-current text-gray-200" fill-rule="evenodd" clip-rule="evenodd" d="M10 9C10.7956 9 11.5587 8.68393 12.1213 8.12132C12.6839 7.55871 13 6.79565 13 6C13 5.20435 12.6839 4.44129 12.1213 3.87868C11.5587 3.31607 10.7956 3 10 3C9.20435 3 8.44129 3.31607 7.87868 3.87868C7.31607 4.44129 7 5.20435 7 6C7 6.79565 7.31607 7.55871 7.87868 8.12132C8.44129 8.68393 9.20435 9 10 9ZM3 18C3 17.0807 3.18106 16.1705 3.53284 15.3212C3.88463 14.4719 4.40024 13.7003 5.05025 13.0503C5.70026 12.4002 6.47194 11.8846 7.32122 11.5328C8.1705 11.1811 9.08075 11 10 11C10.9193 11 11.8295 11.1811 12.6788 11.5328C13.5281 11.8846 14.2997 12.4002 14.9497 13.0503C15.5998 13.7003 16.1154 14.4719 16.4672 15.3212C16.8189 16.1705 17 17.0807 17 18H3Z" fill="#3F3F46"/>
</svg>
</a>
</div>
Hola a todos. Revisando la página que dejó la profesora, existe un pequeño error de maquetación al final de la página, ya que la TabBar se sobrepone a la sección del footer, esto se corrige facilmente colocando al footer un padding bottom del mismo tamaño de la tabBar. Además, la sección del footer lleva un border top para diferenciar la sección. A continuación les dejo el código con la solución a dichos inconvenientes:
- HTML
<footer class="w-full h-auto bg-gray-50 text-gray-300 p-6 space-y-2 border-t border-gray-300 mb-16">
<p class="text-lg font-semibold">Acerca de</p>
<p class="text-sm">Inversores</p>
<p class="text-sm">Trabajos</p>
<p class="text-sm">Política de privacidad</p>
<p class="text-sm">Términos y condiciones</p>
<p class="text-sm">Platzi Travel, inc</p>
<p class="text-sm">Síguenos</p>
<i class="fa-brands fa-twitter text-lg mr-1"></i>
<i class="fa-brands fa-instagram text-2xl"></i>
</footer>
<div id="tabBar" class="w-full h-16 bg-white flex items-center justify-center space-x-10 fixed left-0 bottom-0 border-t border-gray-300 shadow-md"
>
<a href="#home">
<i class="fa-solid fa-house text-xl text-gray-200"></i>
</a>
<a href="#rentas_destacadas">
<i class="fa-solid fa-magnifying-glass text-xl text-primary"></i>
</a>
<a href="#recomendados">
<i class="fa-solid fa-heart text-xl text-gray-200"></i>
</a>
<button>
<i class="fa-solid fa-moon text-xl text-gray-200"></i>
</button>
<a href="#home">
<i class="fa-solid fa-user text-xl text-gray-200"></i>
</a>
</div>
Si tienen problemas con los íconos de la tabBar, deben incluir el link de Font Awesome a la cabecera del código para que los pueda incluir:
- Link del Font Awesome
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
Aporte del Font Awesome por @José Mauricio Lemús Rodezno
Si no quieren copiar y pegar cada svg. Pueden importar el archivo y usarlo como src de una imagen
import Icon from "./svg/icon.svg"
<img src=`${Icon}` />
Si no quieren utilizar svg pueden utilizar una librería de íconos como fontawesome y copiand su cdn en head de su html.
Link para html
<!-- LINK FONTAWESOME CDN -->
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css” integrity=“sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==” crossorigin=“anonymous” referrerpolicy=“no-referrer” />
Página de íconos, donde solo tienen que copiar sus etiquetas i
Fontawesome iconos
Mi TabBar usando iconos de Fontawesone:
Agregue la siguiente CDN:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<div
id="tab_bar"
class="w-full h-16 bg-white flex items-center justify-center space-x-10 fixed left-0 bottom-0"
>
<a href="#home">
<i class="fa-solid fa-house text-xl text-gray-200"></i>
</a>
<a href="#treding">
<i class="fa-solid fa-magnifying-glass text-xl text-primary"></i>
</a>
<a href="#recomended">
<i class="fa-solid fa-heart text-xl text-gray-200"></i>
</a>
<a href="#home">
<i class="fa-solid fa-user text-xl text-gray-200"></i>
</a>
</div>
Para evitar copiar y pegar el svg yo lo hice así:
<img class="fill-current text-gray-200" width="30" height="30" src="./svg/user.svg" alt="">
Mi gente aqui les dejo un registration form listo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Register</title>
</head>
<body>
<div class="flex items-center justify-center min-h-screen bg-gray-100">
<div class="px-8 py-6 mx-4 mt-4 text-left bg-white shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3">
<h3 class="text-2xl font-bold text-center">Join us</h3>
<form action="">
<div class="mt-4">
<div>
<label class="block" for="Name">Name<label>
<input type="text" placeholder="Name"
class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="mt-4">
<label class="block" for="email">Email<label>
<input type="text" placeholder="Email"
class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="mt-4">
<label class="block">Password<label>
<input type="password" placeholder="Password"
class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="mt-4">
<label class="block">Confirm Password<label>
<input type="password" placeholder="Password"
class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<span class="text-xs text-red-400">Password must be same!</span>
<div class="flex">
<a class="w-full px-6 py-2 text-center mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900" href="./index.html">Create
Account</a>
</div>
<div class="mt-6 text-grey-dark">
Already have an account?
<a class="text-blue-600 hover:underline" href="./index.html">
Log in
</a>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Con el siguiente codigo en JavaScript logre hacer que los iconos cambien de color cuando se les da click
```js
const icons = [...document.querySelectorAll('.icons')]
const toggleActive = (e) => {
const item = e.target
const filtered = icons.filter(icon=>icon!==item)
filtered.forEach(icon=>icon.classList.remove('active'))
if (item.classList.contains('active')) {
item.classList.remove('active')
} else {
item.classList.add('active')
}
}
icons.forEach( icon => {
icon.addEventListener('click', toggleActive)
})
```
Mi versión con los heroicons
<div class="w-full h-16 bg-white fixed left-0 bottom-0 shadow-md flex space-x-8 items-center justify-center dark:bg-gray-800 lg:hidden">
<a href="#home">
<svg class="w-9 h-9 fill-green-500 text-gray-200 dark:text-white" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
</a>
<a href="#search">
<svg class="w-9 h-9 text-gray-600 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</a>
<a href="#love">
<svg class="w-9 h-9 fill-red-500 text-gray-600 dark:text-white" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</a>
<a href="#moon">
<svg class="w-9 h-9 fill-current text-gray-600 dark:text-white" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
</a>
<a href="#user">
<svg class="w-9 h-9 fill-teal-500 text-gray-600 dark:text-white" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</a>
</div>
Para cambiar el color min 7:40, también se pude hacer después de path, hay otro atributo que se llama fill, justo ahí se puede poner de forma arbitraria el color que se desee.
Ejemplo:
fill="#CCCCCC"/>
Me paso que no tenia agregado el```html
<script src="https://cdn.tailwindcss.com"></script>
```en el head y ya no me estaba tomando las nuevas modificaciones. Supongo que es debido a alguna actualizacion. Si alguien me podria dar mas informacion les agradezco de antemano.
**ICONOS DE DIFERENTES MARCAS:**
<https://svgl.app/>
**GENERALES:**
<https://heroicons.com/>
<https://play.tailwindcss.com/IRz4GI6B8Z?size=942x955>
Buenas buenas buenas, Por fin lo logre.
Tenia un problema descomunal con el color del stroke (silueta) del icono de la casa. Lo que me ocurria es que si modificaba la propiedad stroke del path del svg a un color, este era estatico osea que si lo ponia rosa luego cuando pusiera la pagina modo dark pues no lograba cambiarle el color al stroke, con las clases fill current etc. Esto lo que hacia era agregar un fondo deforme en el icono. Busque y probe una infinidad de cosas pero nada.
Conclusion: Llego su salvador, si les pasa lo mismo lo que deben de hacer es borrar toda propiedad que diga stroke del path del svg deseado y agregar como clase del icono stroke-{color-deseado}. Asi es, Tailwind tiene una propiedad stroke.
Espero que ayude a alguien 😃
Aquí les dejo el link a los iconos de la clase
https://github.com/platzi/PlatziTravel/tree/main/public/svg
Si el tab_bar te tapa los últimos elementos de la sección “Acerca De”, podés crear un div antes de la etiqueta de cierre del footer y colocar las siguientes propiedades:
<div class=“w-full h-11”></div>
A mi me sirvió
Por que no usar la etiqueta img ?
<a href="">
<img src="svg/home.svg" alt="home">
</a>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?