Creando la sección de Home - Platzi

Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

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,

Recursos

Aportes 54

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Iván Gutiérrez

Como dato, uno de los cambios de la versión 2 a la versión 3 de tailwind afectó los outlines.
En la versión 2, si colocabas outline guión y el color, por ejemplo, outline-black, creaba además el width, el style, y el offset.
En la versión 3, todos esos son atributos separados, por lo que para lograr un outline, habría que colocar lo siguiente:

<input class="outline outline-1 outline-black"></input>

outline se refiere a un estilo sólido, pero se puede usar también outline-dashed, outline-dotted, etc.
outline-black es para el color, donde black se puede reemplazar por cualquier otro color.
outline-1 es para el tamaño, donde el número indica el ancho en pixeles.

Nelida Valero

Si como yo, tuvieron problemas para llamar los colores nativos tailwind debido a la personalización de los colores, hagan esto que hice, Agreguen al principio la constante color requiriendo tailwind colors y luego usan destructuring y así la agregamos a nuestros colores para poder usar en cualquier parte.

<const colors = require('tailwindcss/colors')

module.exports = {
	theme: {
    colors: {
      ...colors,
      'primary': '#CC2D4A',
      'secondary': '#8FA206',
      'terciary': '#61AEC9'
    }
}
>

Platzinauta

Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:

w-36 → width: 9rem;
w-full → width: 100%;
h-3/4 → height: 75%;
h-full → height: 100%;
h-screen → height: 100vh;
p-3 → padding: 0.75rem;
p-4 → padding: 1rem;
py-4 → padding: 1rem 0;
flex → display: flex;
flex-col → flex-direction: column;
absolute → position: absolute;
space-y-96 → margin-top: 24rem;
items-center → align-items: center;
outline-none → outline: 2px solid transparent; outline-offset: 2px;
rounded-full → border-radius: 9999px;
shadow-sm → box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
text-xl → font-size: 1.25rem; line-height: 1.75rem;
font-semibold → font-weight: 600;
bg-white → background-color: white;

–

Archivo index.html:

<!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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../public/css/tailwind.css">
    <title>Platzi Travel</title>
</head>
<body>
    <nav></nav>
    <div id="tab_bar"></div>
    <section class="w-full h-screen">
        <div id="home">
            <div class="w-full h-3/4">
                <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center ">
                    <input type="search" class="outline-none p-3 rounded-full shadow-sm" placeholder="San Francisco" name="" id="">
                    <button class="w-36 rounded-full text-xl text-primary shadow-sm font-semibold p-4 bg-white">Explorar</button>
                </div>
                <div class="w-full h-full">
                    <img src="./img/sanFrancisco.jpg" alt="San Francisco City">
                </div>
            </div>
        </div>
        <div id="recomendadas"></div>
        <div id="rentas_destacadas"></div>
        <div id="faq"></div>
    </section>
    <footer></footer>
</body>
</html>

Laura Roa

Esta clase me dio dolor de cabeza 😦 . El hecho de que el codigo no estuviera visible en toda la pantalla hace que sea muy confuso y se piense que algunas variables se han borrado. Ademas que la profe iba creando variables y borrandolas de un momento a otro. Senti mucho desorden en esta clase. Me gusta mucho el proyecto pero si me gustaria que hicieran esta clase mejor en el futuro

Maria Cristina Ferraro Moretti

Así quedó el mio, estoy usando capas, el fondo es la arena, el texto encima y las olas encima, cuando animemos le haré parallax en el scroll cosa de que las olas destapen y tapen levemente el texto con el movimiento.

Captura de pantalla 2023-01-11 a la(s) 3.03.00 p.m..png

huhero

2022-03-01: curso desactualizado, no funciona los explicado a partir de este video

Cesar Augusto Acjota Merma

SI TIENES ESTE ERROR

ERROR DE VERSIÓN.png

A Mí ME FUNCIONÓ CAMBIAR LA VERSIÓN DE TAILWINDCSS A UNA VERSIÓN ANTERIOR.

SOLUCIÓN A ESTE PROBLEMA.png

Julian Franco

Buenas tardes,

A día de hoy Mayo 02 de 2022

El bg-{color} dell button únicamente funciona con los colores que tengamso declarados en el tailwind.config.js

He visto varias cosas desactualizadas sin embargo no se desmotiven, a los que son frontend saben que respiran y ya tienen una nueva cosa que aprender y siempre hay que estarse actualizando y nunca dejen de aprender ♥

Julian David Alzate Cuervo

Recomiendo agregar text-center para que se vea mejor el placeholder donde está San Francisco

Irving Juárez

El contenedor del input con position absolute no funciono porque el padre debio haber sido position relative

Luis Ariza

Hola, Si no te cargan los estilos intenta minificar el outuput del archivo CSS con el siguiente Flag :

--minify

En el script del archivo package.json quería así:

"scripts": {
    "tailwind": "tailwindcss -i ./src/styles/input.css -o ./public/css/min.output.css --minify --watch"
  },

Ejecutas:

npm run tailwind

Y listo con esto debería cargar los estilos, espero te haya ayudado.

Miguel Negron Garcia

Un dato curioso:

Si se fijan nosotros añadimos todas las imagenes en la configuracion de Tailwind, ya que hicimos eso podemos usarlas como clases, si escribimos el nombre que le dimos a la imagenes en la seccion de clases de los elementos html, la imagen aparecera. Recuerdense que como estamos añadiendo la imagen como si fuese una imagen ded background, es recomendable usar las propiedades bg-contain o bg-cover, bg-center, bg-no-repeat

Si hay alguna razón de porque la profe no uso este metodo agradeceria que me dijeran.

Luis Miguel Aponte Rayo

Que desorden para explicar, se desvía del tema y hace otra cosa y pasa a otra y mueve y quita.

Jhony Cepeda

Mi parte del proyecto

Agu Damonte

Al momento de intentar posicionar el div que contiene dentro el Input search y el button, hubo problemas ya falto indicar al contenedor padre donde buscamos posicionarlos la clase relative

Si agregamos la clase relative al div padre ( <div class="w-full h-3/4 relative "> se soluciona el posicionamiento y no es necesario mover las lineas de codigo.

Juan Diaz

Asì es como lo hice:
En vez de ponerle solo una imagen le puse con un swiper de tres imagenes.

Tanto al input como el button les hice una clase especìfica para ellos:

@layer components {
    .input-search{
        @apply outline-none rounded-full p-2 pl-4 text-gray-700 font-Poppins font-normal text-left shadow-sm hover:text-red-900  hover:placeholder:text-red-900 hover:shadow-md w-4/5 z-10;
    }

    .btn-home {
        @apply bg-white text-xl text-red-900 text-center font-Poppins font-semibold p-2 rounded-full shadow-sm hover:shadow-md w-1/2 z-10;
    }
}

127 - iPhone X - 2022-16-02 at 3.28.35 A. M..jpg

Jose Angel Ayala Zamora

Yo utilize un space-between para colocar el button y el input en la parte inferior y superior, ya que con el space-y-96 se rompia los estilos al momento de hacer el size a 320px. Aqui mi aporte 😃

< <div class="w-full h-auto">
                <div class="flex flex-col justify-between items-center h-screen bg-cover bg-center bg-no-repeat bg-sanFrancisco">
                    <input class="outline-none p-3 mt-6 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12" placeholder="San Francisco" type="search">
                    <button class="w-48 mb-6 rounded-full text-lg text-principal shadow-sm font-semibold p-4 bg-white transition-all duration-500 ease-in-out hover:bg-principal hover:text-white transform hover:-translate-y-1 hover:scale-110">Explore</button>
                </div>
            </div>>

Joan Sebastian Camacho Ardia

Nunca habia utilizado un frameword de css. Pero este de verdad creo que facilita mucho el tiempo de desarrollo. ayudandos a escribir bastante css. Genial Tailwind

Gustavo Victoria Ramirez

Un pequeño aporte sobre este avance: ![](https://static.platzi.com/media/user_upload/Creando%20la%20secci%C3%B3n%20de%20Home-fdec7dc9-02dc-41cf-9e5b-2eba1297b105.jpg)

Cristina Muñiz

No se si alguno tuvo problemas para quitar el borde del input. yo probé como lo pone ella con el outline-none pero en la version 3 no funciona pero al poner border-none si funciona.

Joan Alexander Valerio Rodríguez

Hasta ahora me ha encantado el curso, ha presentado algunos retos ya que estamos en el 2024 y este curso salió en el 2022 🤣 . Aun así, he aprendido mucho de Tailwind css. Un pequeño consejo para la instructora hehe :) toma tu tiempo cuando estes programando, creo que eso te hace perderte un poco. Pero no te preocupes lo estas haciendo muy bien

Pol Valle Montes

Si no veis los cambios como en la case, en el ficehro package.json tenis que añadir el sufijo: --watch a la linea del script:

   "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch"

Esto hace que Tailwind observe y actualice automáticamente el archivo CSS de salida cada vez que se realizan cambios en el archivo CSS de origen. De esta manera, no es necesario ejecutar el comando manualmente cada vez que se realizan cambios.

JuanDelgadillo

la verdad este curso no me gusto . la razon es por que poner bg w text ok si entendi que bg significa el backgroud pero solo lo puso sin explicar el porque, no me gusta criticar pero peiso yo que se ocupa un curso de tailwind actualizada , ya que yo lo istale de forma diferente y conectando archivos con otros pero solo es mi opinion
saludos

Raymondi Alejandro Ramos Vásquez

Esta interesante Tailwind, aunque un poco confuso xd

Brandon Cortes Rivera

Copien esto en tailwind.config.js para agregar el color blanco y así todos los colores que vayan a ocupar.

  theme: {
    colors: {
      'primary':"#CC2D4A",
      'secondary':"#8FA206",
      'tertiary':"#61AEC9",
      "white": "#FFFF",
    },

César Augusto Cortés Labrada

Bueno no es mucho pero quisiera aportar que los botones tienen un box-shadow definido en el diseño de figma. Por lo tanto decidí agregarlo en extends para poderlo usar y quedó así.

extend: {
      boxShadow:{
        shadowButton:"0px 2px 7px rgba(0 0 0 / 0.25)",
      }
    },

Entonces mis botones tienen en su clase lo siguiente

<input class="p-2 shadow-shadowButton rounded-full outline-none text-center" type="search" name="search" placeholder="San Francisco" id="home_search">

<a class="bg-white py-2 px-7 rounded-full shadow-shadowButton text-primary font-semibold" href="#">Explorer more</a>

Sería bueno ir viendo que otros patrones de diseño se repiten en los componentes y agregarlos como llaves adicionales.

Pablo Cesar Acosta Paredes

Siento que el curso esta bueno, pero les recomiendo que también hagan proyectos basados en tailwind 3, si bien en el archivo de package.json uno puede especificar la versión de tw…otra cosa también es que hay muchos proyectos en youtube !! así que no se desmotiven y sobre todo entiendan de css porque en mi caso particular siempre vine usando bootstrap en mis proyectos y en vida laboral…aprender tailwind es como que cambiar mucho el paradigma porque uno tiene que estar bastante familiarizado con css …facilita el desarrollo, sí en lo absoluto pero también puede ser muy complejo !! fuerza y no pierdan la motivación

Iván Alejandro Díaz Jaramillo

Hola, si a alguien como a mi no se les actualizan los estilos prueben modificando el texto, añadiendo o quitando una letra y al guardarlo se muestran los cambios de estilos. 😄

Eduardo Reyes

🍃 Les dejo mi código para que se se ayuden si tienen alguna duda.

<!DOCTYPE html>
<html lang="es">
	<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 rel="stylesheet" href="./css/tailwind.css" />
		<style>
			@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
		</style>
		<title>Platzi Travel</title>
	</head>
	<body>
		<nav></nav>
		<div id="tabBar"></div>
		<section class="w-full h-screen">
			<div id="home">
				<div class="w-full h-3/4">
					<div class="w-full h-full">
						<div
							class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center"
						>
							<input
								type="search"
								name="search"
								id="search"
								placeholder="San Francisco"
								class="outline-none p-3 rounded-full shadow-sm"
							/>
							<button
								class="w-36 bg-white text-xl text-primary font-semibold p-4 rounded-full shadow-sm"
							>
								Explorar
							</button>
						</div>
						<img src="img/sanFrancisco.jpg" alt="San Francisco" />
					</div>
				</div>
			</div>
			<div id="recommended"></div>
			<div id="highlighthed"></div>
		</section>
	</body>
</html>

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/**/*.{html,js}", "./public/*.{html,js}"],
	theme: {
		fontFamily: {
			Montserrat: ['"Montserrat"', "sans-serif"],
		},
		extend: {
			sanFrancisco: "url('../img/sanFrancisco.jpg')",
			sanFranciscoDesktop: "url('../img/sanFranciscoDesktop.jpg')",
			yosemite: "url('../img/yosemite.jpg')",
			LA: "url('../img/LA.jpg')",
			seattle: "url('../img/seattle.jpg')",
			new_york: "url('../img/new_york.jpg')",
			norway: "url('../img/norway.jpg')",
			sydney: "url('../img/sydney.jpg')",
			miami: "url('../img/miami.jpg')",
			switzerland: "url('../img/switzerland.jpg')",
			bali: "url('../img/bali.jpg')",
			chicago: "url('../img/chicago.jpg')",
			europe: "url('../img/europe.jpg')",
			iceland: "url('../img/iceland.jpg')",
			// colors
			colors: {
				primary: "#CC2D4A",
				secondary: "#8FA206",
				tertiary: "#61AEC9",
			},
		},
	},
	plugins: [
		require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
		require("@tailwindcss/aspect-ratio"),
	],
};

samusr

Intentado ser lo más fiel al figma, así he dejado el código de la section Home (el icon search lo exporté del figma):

<div id="home" class="w-full h-3/4">
        <div class="w-full h-full flex flex-col absolute space-y-80 items-center">
          <div class="flex items-center mt-14">
            <span class="absolute left-16">
              <img src="./public/icons/Shape.svg" alt="search-icon">
            </span>
            <input type="search" placeholder="San Francisco" class="w-72 font-Montserrat text-center p-4 rounded-full shadow-sm outline-none">
          </div>
          <button class="w-48 text-primary bg-white font-Montserrat font-semibold p-4 rounded-full shadow-sm">
            Explore More
          </button>
        </div>
        <div class="w-full h-full">
          <img src="./public/img/sanFrancisco.jpg" alt="">
        </div>
      </div>

Travel Landing - Brave 03_02_2023 23_37_17.png

Alexis Daniel Sanchez Arias

De verdad es el curso más complicado que he tomado, y no lo digo por que sea dificil, si no porque está muy poco claro. se tomó varias clases medio explicando que hace cada cosa, pero en la practica uno ya debe ir viendo lo que agregar y la razón de agregar dicha clase. En serio es lo peor

Joseph Vela

la verdad los primeros 6min me confundieron, no hay claridad del tema, y se nota el salto en la edición

Michelle Duque De La Rosa

Al revisar el screen con un width de 320px el botón se encontraba muy abajo por lo que cambie el space-y-96 por: **space-y-80** y funciono. ```html

<input class="outline outline-none p-3 rounded-full shadow-sm" type="search" placeholder="San Francisco"> <button class="text-xl text-primary bg-white font-semibold w-2/4 p-4 rounded-full shadow-md">Explorar</button>

```

Michelle Duque De La Rosa

Al revisar el screen con un width de 320px el botón se encontraba muy abajo por lo que cambie el space-y-96 por: **space-y-80** y funciono. `

<input ``class``="outline outline-none p-3 rounded-full shadow-sm" ``type``="search" ``placeholder``="San Francisco"> <button ``class``="text-xl text-primary bg-white font-semibold w-2/4 p-4 rounded-full shadow-md">Explorar</button>

`

Michelle Duque De La Rosa

Al revisar el screen con un width de 320px el botón se encontraba muy abajo por lo que cambie el space-y-96 por: **space-y-80** y funciono. ```js

<input class="outline outline-none p-3 rounded-full shadow-sm" type="search" placeholder="San Francisco"> <button class="text-xl text-primary bg-white font-semibold w-2/4 p-4 rounded-full shadow-md">Explorar</button>

```

Michelle Duque De La Rosa

Al revisar el screen con un width de 320 el botón se encontraba muy abajo por lo que cambie el space-y-96 por: **space-y-80** y funciono. `

<input ``class``="outline outline-none p-3 rounded-full shadow-sm" ``type``="search" ``placeholder``="San Francisco"> <button ``class``="text-xl text-primary bg-white font-semibold w-2/4 p-4 rounded-full shadow-md">Explorar</button>

`

Pablo Alejandro Figueroa

si a alguien le resulta molesto desarrollar desde VSC prueben usando el tailwindPLAY y ya verán que bien va..!

Pablo Alejandro Figueroa

![](https://static.platzi.com/media/user_upload/imagen-43ba05b0-bdd3-48ca-bffb-d5587b0465b6.jpg) ![](https://static.platzi.com/media/user_upload/imagen-e0660507-4302-4205-91bb-dcc3b2ec42cd.jpg)

DAVID PEÑAVASQUEZ

le falta experiencia a la profe

Carlos Polanco Quijano

La configuracion , en archivo tailwind.config quedo asi esto a la version 3.4.1 ![](https://static.platzi.com/media/user_upload/image-e71f1c1e-a730-4c92-97f5-547b790e0eae.jpg)

Luis Alberto Arciniegas Jaimes

Comparto este enlace para los colores. En el list de COPY encuentras varios modos. <https://tailwindcolor.com/>

Harold German Granados Guerrero

2023
Aqui el codigo, pero recuerda cambiar la fuente ya que queria probar una diferente.
La fuente que usees: https://fonts.google.com/specimen/Agbalumo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../public/css/tailwind.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Agbalumo&display=swap" rel="stylesheet">
    <title>Travel</title>
</head>
<body>
    
    <nav></nav>
    <div id="tab_bar"></div>
    <section class="w-full h-screen">
        <div id="home" class="w-full h-3/4">
            <div class="w-full h-full flex flex-col absolute space-y-80 items-center">
              <div class="flex items-center mt-14">
                <span class="absolute left-16">
                </span>
                <input type="search" placeholder="San Francisco" class="w-72 font-agbalumo text-center p-4 rounded-full shadow-sm outline-none">
              </div>
              <button class="w-48 text-primary bg-white font-agbalumo p-4 rounded-full shadow-sm">
                Explore More
              </button>
            </div>
            <div class="w-full h-full">
              <img src="./img/sanFrancisco.jpg" alt="">
            </div>
          </div>
        <div id="recomendadas"></div>
        <div id="rentas_destacadas"></div>

    </section>
    <footer>

    </footer>
</body>
</html>

Tadeo Jano Alarcon

En vez de mover el div que tiene el input y el button (minuto 6:10) pueden agregarle un “top-0” y un “relative” a su div padre.

Por cierto, hay veces que con Tailwind CLI y PostCSS necesitan apretar CTRL + S (guardar) 2 veces para ver reflejado los cambios. Aun desconozco la razon.

Carlos Augusto Rodríguez Miranda

sección de home

Captura desde 2023-09-14 10-47-26.png

 <section id="home">
            <figure class="relative w-full max-w-lg">
                <img class="object-cover" src="./img/sanFrancisco.jpg" alt="San Francisco">
                <div class="absolute top-0 flex flex-col w-full px-4 py-6">
                    <span class="self-end flex justify-center items-center w-14 h-6 p-4 bg-complement rounded-full">
                        <i class="fa-solid fa-moon text-lg text-auxiliar"></i>
                    </span>
                    <input class="mt-6 w-full px-4 py-3 text-center rounded-full shadow-sm" type="text" placeholder="🔍 San Francisco">
                </div>
                <div class="flex justify-center w-full absolute bottom-14">
                    <button 
                        class="px-12 py-3 font-semibold text-lg text-auxiliar bg-complement rounded-full shadow-md"
                    >Explore More
                    </button>
                </div>
            </figure>
        </section>

Rubén Ernesto Aragón Gil

Mi terminal me dice esto:

warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `warmGray` has been renamed to `stone`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `trueGray` has been renamed to `neutral`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `coolGray` has been renamed to `gray`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`.
warn - Update your configuration file to silence this warning.

Rebuilding...
Done in 178ms.

Saben cómo puedo quitar ese warn y rebuilding, por favor?

Jibran Antonio Tannous Puerta

Lo único que había que hacer para posicionar el div con absolute por encima de la imagen era colocando top-0.

Es extraño que al colocar absolute, por su naturaleza, no “perdiera” su lugar y se posicionara por encima de manera automática, pero supongo que es parte de las cosas que tailwind sobrescribe.

Edwin Alexander Torrez Villegas

Captura de pantalla (482).png

Me está gustando el curso, no se pq se quejan tanto.

Agu Damonte

https://www.figma.com/file/aPbr2Rhd5SCUjNYu6NRPPB/Platzi-Travel-Mockups?node-id=0%3A1

Joaquin esteban

Me hace acordar al callback-hell de JavaScript pero en CSS jajaj te mareas un poco…

Alejandro Betancourt

2-9-2022 Me canse de este curso desactualizado !!

Iván Alejandro Díaz Jaramillo

Cómo recomendación para que se vea todo el código en el Visual Studio sin que se corte o aparezca el scroll lateral añadir el ajuste Word Wrap (alt + z) o en la pestaña de View ahi aparece. 😄

Jhon Ferney Soto Balanta

la clase text-semibold no existe almenos en tailwind 3, se debe usar font-semibold

Enrique Zárate

Yo usé w-2/4 y 3/4 para que se adapte a diferentes tamaños de pantalla

 <input
              class="w-3/4 p-3 text-xl rounded-full text-center shadow-md"
              type="search"
              name=""
              placeholder="San Francisco"/>
<button
              class="text-xl text-primary bg-white font-semibold w-2/4 p-4 rounded-full shadow-md">
              Explorar más
            </button>

Juan David Murillo Giraldo

Hacer CSS nunca fue tan divertido 😃