Creando la sección de Home

Curso Básico de Tailwind

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Crear cuenta

Si ya tienes una cuenta,

Iniciar sesión

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.

Iván Gutiérrez

hace 4 meses

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.

Platzinauta

hace 4 meses

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>

Joan Sebastian Camacho Ardia

hace 4 meses

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

Cesar Augusto Acjota Merma

hace 4 meses

SI TIENES ESTE ERROR

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

Julian David Alzate Cuervo

hace 2 meses

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

Juan Daniel Díaz Jaramillo

hace 3 meses

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

huhero

hace 3 meses

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

Julian Franco

hace 22 días

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 ♥

Enrique Zárate

hace un mes

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

hace 4 meses

Hacer CSS nunca fue tan divertido 😃