A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Creando la secci贸n de Home

14/29
Recursos

Aportes 10

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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.

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

  • w-36width: 9rem;
  • w-fullwidth: 100%;
  • h-3/4height: 75%;
  • h-fullheight: 100%;
  • h-screenheight: 100vh;
  • p-3padding: 0.75rem;
  • p-4padding: 1rem;
  • py-4padding: 1rem 0;
  • flexdisplay: flex;
  • flex-colflex-direction: column;
  • absoluteposition: absolute;
  • space-y-96聽鈫 margin-top: 24rem;
  • items-centeralign-items: center;
  • outline-noneoutline: 2px solid transparent; outline-offset: 2px;
  • rounded-fullborder-radius: 9999px;
  • shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  • text-xlfont-size: 1.25rem; line-height: 1.75rem;
  • font-semiboldfont-weight: 600;
  • bg-whitebackground-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>

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

SI TIENES ESTE ERROR

A M铆 ME FUNCION脫 CAMBIAR LA VERSI脫N DE TAILWINDCSS A UNA VERSI脫N ANTERIOR.

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

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;
    }
}
2022-03-01: curso desactualizado, no funciona los explicado a partir de este video

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 鈾

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>

Hacer CSS nunca fue tan divertido 馃槂