No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Haciendo responsivo nuestro proyecto: rentas destacadas

24/29
Recursos

Aportes 19

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Yo siento que es mucho mejor usar Grid para este tipo de casos. No siempre todo se debe resolver con Flex.

Adjunto mi c贸digo de c贸mo organic茅 todo con grid tanto para la version mobile como desktop simplemente indicando que en mobile es 1 sola columna y en version lg 5 columnas y 2 filas.
Con la propiedad de span(row o col) por ejemplo le dices a un div que se expanda, como es el caso de Los Angeles que toma el alto de 2 filas.

<div id="trending-stays" class="p-6 h-full w-full">
        <p class="text-3xl text-primary font-semibold">Trending Stays</p>
        <div
          class="w-full h-full flex flex-col space-y-4 items-center justify-center mt-6"
        >
          <div
            class="w-full h-96 bg-chicago bg-cover rounded-xl lg:h-[38rem] lg:text-right lg:bg-center lg:pt-12"
          >
            <p class="card-title">Chicago</p>
            <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
              2 rooms, bathroom and kitchen.
            </p>
          </div>
          <div
            class="w-full h-full grid grid-cols-1 lg:grid-cols-5 lg:grid-rows-2 lg:place-items-center lg:place-content-stretch gap-4"
          >
            <div
              class="w-full h-96 bg-LA bg-cover rounded-xl lg:row-span-2 lg:col-span-2 lg:h-[49rem] lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Los Angeles</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                4 rooms, 3 bathrooms, kitchen and private pool.
              </p>
            </div>
            <div
              class="w-full h-96 bg-miami bg-cover rounded-xl lg:row-span-1 lg:col-span-3 lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Miami</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                3 rooms, 2 bathrooms, kitchen and amazing sea view.
              </p>
            </div>
            <div
              class="w-full h-96 bg-bali bg-cover rounded-xl lg:row-span-1 lg:col-span-3 lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Bali</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                2 rooms, 2 bathrooms, kitchen and private pool.
              </p>
            </div>
          </div>
        </div>
      </div>

La verdad fue que me enred茅 bastante haci茅ndolo con los <div>, as铆 que lo hice con grid.
Por si alguien le pasa igual, comparto mi c贸digo

<div id="rentas_destacadas" class="h-full w-full px-6">
    <p class="text-3xl text-primary font-semibold pb-6 mt-6">
        Rentas destacadas
    </p>
    <div
        class="w-ful h-full grid grid-cols-1 lg:grid-cols-2 lg:place-items-center gap-4 lg:place-content-stretch"
    >
        <div
            class="relative w-full h-96 rounded-lg overflow-hidden lg:col-span-2"
        >
            <img
                class="object-cover h-full w-full"
                src="./img/chicago.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Chicago</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
        <div
            class="relative w-full h-96 rounded-lg overflow-hidden lg:row-span-2 lg:h-[49rem]"
        >
            <img class="object-cover h-full w-full" src="./img/LA.jpg" alt="" />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Los Angeles</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
        <div class="relative w-full h-96 rounded-lg overflow-hidden">
            <img
                class="object-cover h-full w-full"
                src="./img/miami.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Miami</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
        <div class="relative w-full h-96 rounded-lg overflow-hidden">
            <img
                class="object-cover h-full w-full"
                src="./img/bali.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Bali</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, ba帽o y cocina
                </p>
            </div>
        </div>
    </div>
</div>

Y tambi茅n utilice etiquetas <img> para las im谩genes en lugar de clases bg-鈥渘ombre_imagen.jpg鈥.

En mi caso us茅 grid y para mantener las im谩genes m谩s verticales que horizontales (porque us茅 el concepto de experiencias en vez de hoteles) hice 3 columnas. Dejo mi c贸digo abajo

    <!-- Experiences -->
    <div id="experiences" class="p-4 md:max-w-screen-xl m-auto">
        <h2 class="Title">Top Experiences</h2>
        
        <div class="w-full h-full mt-10 mb-10 grid grid-cols-1 md:grid-cols-4 md:place-items-center gap-4 items-center justify-center">
            
            <!-- Exp Card 1-->
            <div class="ExperienceCard bg-expBorabora md:bg-expBoraboraLg md:h-[49rem] md:row-span-2 md:col-span-2">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Swim with Sharks and Rays</p>
                    <p class="text-white">Bora Bora</p>
                </div>
            </div>
            <!-- / Exp Card 1-->
            <!-- Exp Card 2-->
            <div class="ExperienceCard bg-expYellowknife md:h-96 md:row-span-1 md:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Intimate Aurora Tour</p>
                    <p class="text-white">Canada</p>
                </div>
            </div>
            <!-- / Exp Card 2 ->
            <!-- Exp Card 3 -->
            <div class="ExperienceCard bg-expFrance hidden md:block md:h-96 md:row-span-1 md:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Wine Tasting in Burgundy</p>
                    <p class="text-white">France</p>
                </div>
            </div>
            <!-- / Exp Card 3 ->
            <!-- Exp Card 4 -->
            <div class="ExperienceCard bg-expCalafate md:h-96 md:row-span-1 md:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Trakking Perito Moreno</p>
                    <p class="text-white">Argentina</p>
                </div>
            </div>
            <!-- / Exp Card 4 ->
            <!-- Exp Card 5 -->
            <div class="ExperienceCard bg-expCapadocia hidden md:block md:h-96 md:row-span-1 mdlg:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Hot Air Balloons</p>
                    <p class="text-white">Capadocia</p>
                </div>
            </div>
            <!-- / Exp Card 5 -->
            
                </div>
                
            </div>
            <!-- / Experiences -->

Secci贸n rentas destacadas de archivo index.html:

<div class="px-6 w-auto lg:px-6" id="rentas_destacadas">
            <p class="text-3xl text-primary font-semibold pb-6 mt-2">Rentas destacadas</p>
            <div class="w-full h-full flex flex-col items-center justify-center">
                <div class="w-full h-96 bg-chicago bg-cover rounded-xl mb-6 lg:bg-center">
                    <p class="CardTitle lg:text-b">Chicago</p>
                    <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 habitaciones, ba帽o y cocina</p>
                </div>
                <div class="lg:flex lg:h-full lg:w-full lg:space-x-4">
                    <div class="w-full h-96 bg-LA bg-cover rounded-xl mb-6 lg:h-auto">
                        <p class="CardTitle">Los Angeles</p>
                        <p class="text-sm pl-8 text-white mr-24 lg:text-lg">3 habitaciones, 2 ba帽os, cocina y excelente vista al mar.</p>
                    </div>
                    <div class="h-full w-full">
                        <div class="w-full h-96 bg-miami bg-cover rounded-xl mb-6">
                            <p class="CardTitle">Miami</p>
                            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">4 habitaciones, 3 ba帽os, cocina y piscina privada</p>
                        </div>
                        <div class="w-full h-96 bg-bali bg-cover rounded-xl mb-6">
                            <p class="CardTitle">Bali</p>
                            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 habitaciones, ba帽o, cocina y piscina privada</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Estuve probando con grid y la verdad aparte de ser m谩s f谩cil hay mucho menos c贸digo! Ya que no se necesitan de 鈥榙ivs鈥 extra.

Estoy generando mi proyecto con ViteJS+ReactJS+TailwindCSS, tuve que adaptar esta secci贸n entre Flex y Grid 馃槅馃榿

CSS

.Featured {
  @apply w-full h-full flex flex-col items-center justify-center space-y-4 md:flex-row md:flex-wrap lg:grid lg:grid-cols-5 lg:grid-rows-3 lg:gap-4 lg:space-y-0;
}
.Card__featured {
  @apply w-full h-96 bg-chicago bg-cover rounded-xl md:w-3/5 lg:w-full lg:bg-center lg:col-span-3;
  &:nth-child(1) {
    @apply md:w-full lg:col-span-5;
  }
  &:nth-child(2) {
    @apply lg:col-span-2 lg:row-span-2 lg:h-full lg:w-full;
  }
  p:nth-child(1) {
    @apply text-3xl px-8 pt-8 pb-2 rounded-lg flex-none font-bold text-white lg:pt-24;
  }

  p:nth-child(2) {
    @apply text-sm pl-8 text-white mr-24 font-semibold;
  }  
}

Me paso que cuando cree el div que encierra las 3 ciudades, la profesora dijo que le pusiera el atributo hidden para que no interfiriera con el responsive mobile, no es necesesario poner el hidden, por que con los atributos lg: no se altera la vista mobile. cuando lo puse en mobile no veia las 3 tarjetas, y me tire siempre un tiempo descifrando que fue.

MUCHACHOS agreguen a sus clases solo lo que aqui esta agregado con LG y con eso ya tendran todo en grid y sin mucho codigo 馃槃

<div class="w-full h-auto flex flex-col space-y-4 items-center justify-center lg:grid lg:grid-cols-2 lg:grid-rows-3 lg:gap-3">
                <div class="BigCard bg-chicago lg:bg-center lg:col-span-2 lg:row-span-1">
                    <p class="BigCardTitle">Chicago</p>
                    <p class="BigCardDescription">2 dorms, 1 bathroom and kitchen</p>
                </div>
                <div class="BigCard bg-europe">
                    <p class="BigCardTitle">Europe</p>
                    <p class="BigCardDescription">3 dorms, 2 bathroom, courtyard and kitchen</p>
                </div>
                <div class="BigCard bg-iceland lg:col-span-1 lg:row-span-3 lg:h-full">
                    <p class="BigCardTitle">Iceland</p>
                    <p class="BigCardDescription">1 dorms, 1 bathroom and kitchen</p>
                </div>
                <div class="BigCard bg-switzerland">
                    <p class="BigCardTitle">Switzerland</p>
                    <p class="BigCardDescription">2 dorms, 2 bathroom and kitchen</p>
                </div>
            </div>

vi el video y entiendo lo que la maestra quiere lograr, pero me parec铆a muy tedioso hacerlo con flex, cuando esta es una de esas situaciones donde grid debe ser utilizado. A cualquier que lo vea este comentario, le recomiendo intente ver la documentaci贸n de tailwind sobre grid y lo aplique al proyecto. Aqui les dejare mi implementaci贸n, la cual fue muy sencilla, incluso mas que hacerlo con cajitas usando flex.

<div class="px-2 h-auto w-full" id="rentas_destacadas">
        <p class="text-3xl text-primary font-semibold pb-6 mt-6">
          Rentas Destacadas
        </p>
        <div
          class="sm:flex w-full h-auto sm:flex-col space-y-6 lg:space-y-0 sm:items-center sm:justify-center lg:grid lg:grid-cols-3 lg:grid-rows-3 lg:gap-4"
        >
          <div class="w-full h-96 bg-chicago bg-cover rounded-xl lg:col-span-3 lg:row-span-1 lg:mt-0">
            <p class="CardTitle">Chicago</p>
            <p class="text-sm pl-8 text-black mr-24">
              2 habitaciones, ba帽o y cocina
            </p>
          </div>
          <div class="w-full h-96 bg-LA bg-cover rounded-xl lg:row-start-2 lg:row-end-4 lg:h-full">
            <p class="CardTitle">Los Angeles</p>
            <p class="text-sm pl-8 text-black mr-24">
              4 habitaciones, 3 ba帽os, cocina y piscina privada
            </p>
          </div>
          <div class="w-full h-96 bg-miami bg-cover rounded-xl lg:col-span-2 lg:row-span-1">
            <p class="CardTitle">Miami</p>
            <p class="text-sm pl-8 text-black mr-24">
              2 habitaciones, ba帽o, cocina y una asombrosa vista
            </p>
          </div>
          <div class="w-full h-96 bg-bali bg-cover rounded-xl  lg:col-start-2 lg:col-end-4">
            <p class="CardTitle">Bali</p>
            <p class="text-sm pl-8 text-black mr-24">
              2 habitaciones, 2 ba帽os, cocina y piscina privada
            </p>
          </div>
        </div>
      </div>

Me uno al Team-Grid

<div id="rentas_destacadas" class="px-6 h-full w-full lg:px-6">
      <p class="text-3xl text-primary font-semibold pb-6 mt-6">Rentas Destacadas</p>
      <div class="w-full h-96 bg-red-200 bg-chicago bg-cover bg-fixed rounded-xl mb-8 lg:bg-center">
        <p class="CardTitle lg:text-black">Chicago</p>
        <p class="text-sm pl-8 text-white mr-24 lg:text-lg lg:text-black">2 habitaciones, ba帽o y cocina</p>
      </div>
      <div class="lg:grid lg:grid-cols-2 lg:space-x-6 lg:space-y-0 space-y-6">
        <div>
          <div class="w-full h-96 lg:h-full bg-LA bg-cover bg-fixed rounded-xl">
            <p class="CardTitle">Los 脕ngeles</p>
            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">4 rooms, 3 bathrooms, kitchen and private pool.</p>
          </div>
        </div>
        <div>
          <div class="h-full w-full space-y-6">
            <div class="w-full h-96 bg-miami bg-cover bg-fixed rounded-xl ">
              <p class="CardTitle">Miami</p>
              <p class="text-sm pl-8 text-white mr-24 lg:text-lg">3 rooms, 2 bathrooms, kitchen and amazing
                sea view.</p>
            </div>
            <div class="w-full h-96 bg-bali bg-cover bg-fixed rounded-xl ">
              <p class="CardTitle">Bali</p>
              <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 rooms, 2 bathrooms, kitchen and private
                pool.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

tailwind simplifica incluso el uso de grid que es algo complejo cuando dejas de maquetar en un tiempo

Para los que les interese ver un poco m谩s acerca de como trabajar con grid en tailwind pueden verlo aqu铆 CSS Grid 鈥 What鈥檚 new in Tailwind CSS

Les dejo la opcion con grid de la manera mas fac铆l que vi:

<aside className='flex flex-col gap-9 lg:grid lg:grid-cols-2 '>
            <article className='flex lg:col-span-1 row-span-2'>
              <picture className='w-full h-[400px] px-6 py-12 bg-chicago bg-cover bg-center rounded-2xl shadow-custom lg:h-auto'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Chicago</h3>
                <p className='text-base py-3'>2 rooms, bathroom and kitchen.</p>
                </div>
              </picture>
            </article>
            <article className='flex lg:col-span-1 lg:row-span-1'>
              <picture className='w-full h-[400px] px-6 py-12 bg-LA bg-cover bg-center rounded-2xl shadow-custom'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Los Angeles</h3>
                <p className='text-base py-3'>4 rooms, 3 bathrooms, kitchen and private pool.</p>
                </div>
              </picture>
            </article>
            <article className='flex lg:col-span-1 lg:row-span-1'>
              <picture className='w-full h-[400px] px-6 py-12 bg-miami bg-cover bg-center rounded-2xl shadow-custom'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Miami</h3>
                <p className='text-base py-3'>3 rooms, 2 bathrooms, kitchen and amazing sea view.</p>
                </div>
              </picture>
            </article>
            <article className='flex lg:col-span-2 lg:row-span-1'>
              <picture className='w-full h-[400px] px-6 py-12 bg-bali bg-cover bg-center rounded-2xl shadow-custom'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Bali</h3>
                <p className='text-base py-3'>2 rooms, 2 bathrooms, kitchen and private pool.</p>
                </div>
              </picture>
            </article>
          </aside>

Hola a todos. Prefer铆 utilizar CSS Grid para este caso en particular. Yo estoy utilizando la versi贸n de TW 3.3.3.
El resultado fue:
![Mi resultado implementando Grid](

  • Lo que hice fue definir en el contenedor padre las reglas:
    grid grid-cols-1 grid-rows-4 gap-4

  • Para expandir los hijos utilice:
    Para la imagen principal: md:col-span-2 md:row-span-2

  • Para la imagen de los Angeles:
    md:row-span-2

Espero les ayude.

Demasiados div para mi gusto, est谩 mejor usar grid鈥

Hola a todos, yo tambien hice la seccion de trending stays con grid. Use propiedades como col-start-number, col-end-number, row-start-number y row-end-number. No estoy seguro pero por lo que investigue, entiendo que en tailwind no se puede usar la propiedad grid-area. De hecho si van a tailwind no se ve esta propiedad. Les traigo un link en donde haciendo unas modificaciones en el archhivo tailwind.config. se puede habilitar esta propiedad. Espero que le sirva a alguien.

(https://savvywombat.com.au/tailwind-css/grid-areas/)

Esta muy tedioso hacerlo con flex.

Concuerdo con los dem谩s, es mucho m谩s eficiente y f谩cil hacerlo con grid, aplicando row-span-{x} y col-span-{x}

Aqui se podria usar una directiva @apply para el texto dentro de las cards y asi no tener que modificar uno a la vez