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

Dise帽ando nuestras cards

15/29
Recursos

Aportes 26

Preguntas 8

Ordenar por:

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

o inicia sesi贸n.

En lugar de meter paddings en la card, usemos flex para m谩s placer (:


                <div class="bg-secondary w-full h-2/5 flex items-center justify-center flex-col rounded-b-lg">
                    <p class="text-white text-bold text-xl">Norway</p>
                    <p class="text-white text-medium">Beautiful landscapes</p>
                </div>


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

  • p-20padding: 5rem;
  • px-4padding-left: 1rem; padding-right: 1rem;
  • py-2padding-top: 0.5rem; padding-bottom: 0.5rem;
  • w-48width: 12rem;
  • h-64height: 16rem;
  • h-2/5height: 40%;
  • h-3/5height: 60%;
  • shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  • rounded-lgborder-radius: 0.5rem;
  • rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
  • rounded-b-lgborder-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
  • bg-norwaybackground-image: url('../img/norway.jpg');
  • bg-coverbackground-size: cover;
  • font-boldfont-weight: 700;
  • text-whitecolor: white;
  • text-xlfont-size: 1.25rem; line-height: 1.75rem;


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>Gogo 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 class="p-20" id="recomendadas">
            <div class="w-48 h-64 shadow-md rounded-lg">
                <div class="w-full h-3/5 rounded-t-lg bg-norway bg-cover"></div>
                <div class="w-full h-2/5 bg-secondary rounded-b-lg">
                    <p class="text-white font-bold text-xl px-4 py-2">Norway</p>
                    <p class="text-white px-4">Paisajes Incre铆bles</p>
                </div>
            </div>
        </div>
        <div id="rentas_destacadas"></div>
        <div id="faq"></div>
    </section>
    <footer></footer>
</body>
</html>

Observaciones:

  • text-bold no existe, en su lugar se usa font-bold.
  • text-md no existe (parece ser clase de Bootstrap), en su lugar se puede usar text-base.

!Hi隆 Platzinauta.
Si tienes el siguiente error:

Es decir no te muestra la imagen de norway.jpg , lo mas probable es que la ruta sea incorrecta. La ruta de acuerdo al proyecto es 鈥/img/norwary.jpg , pero esto puede cambiar seg煤n el sistema operativo que uses (tambi茅n depende de la configuraci贸n del proyecto, pero tomando en cuenta que tu proyecto es organizado de la misma manera que en el curso, entonces esto no debe ser problema).

Dicho esto, lo mas probable es que sea la ruta, tienes que modificar dichas rutas en el archivo tailwind.config.js.

En mi caso quedo as铆:

Yo estoy en una pc con Ubuntu.
Animo Platzinautas. Los errores son parte del proceso.

Remember:
Never stop learning

Peque帽a correcci贸n:

La propiedad para hacer el texto bold es:

font-bold

El text-md realmente no existe, en su lugar yo use:

text-base

Que mal que no se ve bien lo que se escribe porque el video de la profe lo tapa 馃槮

Har茅 las cards as铆 con conteo de like :3

Hola a todos si est谩n teniendo problemas con las im谩genes y colores del texto tengamos en cuenta lo siguiente:
Para las im谩genes:
1.- Verificar que las rutas en tailwind.config.js tenga el path con dos puntos al inicio (鈥) ejemplo:

'norway': "url('../src/img/norway.jpg')",

Para los colores por defecto que nos da tailwind:
1.- Verificar que tailwind.config.js hayamos escrito la propiedad textColor dentro de theme y extends ya que esto hace que extienda los colores que asignemos y herede los que nos da tailwind.
2.- Para los backgrounds colors (bg) tambi茅n hay que verificar que est茅n dentro de extends y muy importante verificar que hayamos escrito bien 鈥heme(鈥榗olors鈥),

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
      },
      backgroundColor: theme => ({
        ...theme('colors'), 
        "primary": '#CC2D4A',
        "secondary": '#8FA206',
        'terciary': '#61AEC9'
      }),
      textColor: {
        "primary": '#CC2D4A',
        "secondary": '#8FA206',
        'terciary': '#61AEC9'
      },
      fontFamily: {
        Montserrat: [
          'Montserrat', 'sans-serif'
        ]
      }
    }
  },
  plugins: [],
}

Hola.
A m铆 no me funciono el text-bold, en cambio, font-bold si,

Yo us茅 flex box dentro del div con los detalles del lugar. C贸digo y como se va viendo a continuaci贸n:

Tener en cuenta que text-bold en realidad es font-bold y text-md en realidad es text-base

Despu茅s de tomar el curso pr谩ctico de frontend aprend铆 un 鈥渢ruco鈥 para no estar usando siempre las im谩genes como fondo y as铆 qued贸 mi card.

Mismo resultado.

<div class="w-48 h-64 shadow-md rounded-lg">
	<img class="w-full h-3/5 rounded-t-lg object-cover" src="./img/norway.jpeg" alt="">
	<div class="w-full h-2/5 rounded-b-lg bg-secondary text-white px-4 py-2">
		<p class="text-bold text-xl">Norway</p>
<p class="text-md">Beautiful landscapes</p>
	</div>
</div>

si quieren que el borde se les adapte solo, deben poner la propiedad overflow-hidden en la caja padre

<div class="w-48 h-64 bg-red-200 shadow-md rounded-2xl mt-10 overflow-hidden">
        <div class="w-full h-3/5 bg-red-300  ">1</div>
        <div>2</div>
      </div>

Si tienes problemas para que se vea la imagen de Noruega f铆jate en que la direcci贸n es comienza con 2 puntos (鈥/img), evita escribir src o public, f铆jate tambi茅n en que la carpeta img se encuentre dentro de public.

en cuanto a hacer el texto bold la profesora usa la propiedad text-bold la cual es incorrecta ya que la propiedad de tailwind para font-weight: bold es font-bold

Hola no s茅 si alguien m谩s le ha pasado esto, pero en mi caso al dar un h-3/5 me pone el height a 0 px , raz贸n por la que mi imagen no se visualiza.

A mi no me funcion贸 trayendola desde el archivo de configuraci贸n de Tailwind, aunque estoy utilizando Reactjs para el proyecto pero no creo que ese sea el caso. De todos modos como ven en la imagen tuve que importar la imagen desde la carpeta de assests y presentarla con una etiqueta imagen dentro de div que estabamos trabajando

Si se fijan en el div que contiene la imagen tengo el bg-norway que este si se supone que debe traer las imagenes desde tailwind.config.cjs pero simplemente no funciona desde ah铆, as铆 que tuve que buscar la alternativa de colocarla con la etiqueta de img. Espero que este comentario le pueda ayudar a alguien. Fu铆 a la documentaci贸n de Tailwind a leer a ver si me faltaba algo pero no es as铆, todo est谩 bien configurado.

Archivo de configuracion de Tailwind

Aqu铆 les dejo una foto de mi archivo y el link a la documetaci贸n de background image por parte de tailwind https://tailwindcss.com/docs/background-image

Acordaros de hacer cuando entr茅is, despu茅s de haber cerrado VSCode, de hacer npm run tw:build

TEXT-WHITE

Para los que la clase text-white no les funcione es porque al modificar la propiedad textColor del tailwind.config.js substituyes todas las clases por default por las que agreges. Para solucionar eso escriban el codigo de abajo:

textColor: theme => ({
      ...theme('colors'),
      'primary': '#CC2D4A',
      'secondary': '#8FA206',
      'terceary': '#61AEC9',
}),

Lo que estas haciendo es llamando una funcion que retorna una copia de todas las clases por default y luego le agregas las clases personalizadas que has colocado.

code class recomendadas

<div class="p-20" id="recomendadas">
        <div class="w-48 h-64 shadow-md rounded-lg">
            <div class="w-full h-3/5 bg-norway bg-cover rounded-t-lg"></div>
            <div class="w-full h-2/5 bg-secondary rounded-b-lg">
                <p class="text-white font-bold text-xl px-4 py-2">Norway</p>
                <p class="text-white text-md px-4">paisajes Increibles</p>
            </div>
        </div>

Creo que le voy agarrando la onda xd

cuando agregas un 鈥渞ounded-lg鈥 a una card y le agregas una imagen adentro de la card la imagen no esta obligada o limitada a tener el mismo borde redondeado de la carta, en este caso puedes hacer dos cosas:

  • le agregas el borde a la imagen en las esquinas

  • agregas un overflow-hidden a la card para que nada
    sobresalga o se desborde de ella.

ambas logran el mismo efecto pero en este caso yo prefiero la segunda opcion

Tip, para solucionar el error, de not found, en el url del backgroundImage

@parcel/core: Failed to resolve 鈥樷/assets/image/norway.jpg鈥 from 鈥./src/css/tailwind.css鈥

  1. Entra al archivo tailwind.css, ingresa y crea temporalmente una clase div ( o cualquiera* ) y dale la propiedades de background-image con url
.div{
    background-image: url('../../assets/image/bali.jpg');
}
  1. Ahora esa es la URL que debes usar para el archivo de tailwind.config.js
'bali': "url('../../assets/image/bali.jpg')",

y listo todo OK, eso entiendo que es porque el c贸digo se renderiza desde el archivo de tailwind.css

ATENCION:
A toda la gente que le falle el bg-norway, comprobad que se haya hecho el **build **correctamente en el fichero public/css/index.html
para ello usad el comando:

npx tailwindcss -i ./src/index.css -o ./public/css/index.css

aqui un hilo donde estuve buscando posibles soluciones al tema de las imagenes de background : https://github.com/tailwindlabs/tailwindcss/discussions/5504#discussioncomment-5374854

Para los que probaron con poner los dos puntos y las mil y una maneras para que les tome norway encontre una solucion que funciona aunque no creo que sea la mejor. Si se fijan el archivo tailwind.css que se renderiza (lo pueden buscar en source desde el navegador o en vs code, es el que genera el build), y buscan con ctrl+f norway van a ver que siemrpe les toma la ruta a la imagen como ./img/norway.js, por eso yo lo que hice fue poner la carpeta de las imagenes al mismo nivel que mi archivo de css ( )

Asi fue como yo hice mis cards 馃槂 no me gusto mucho la maquetacion del video pero intente hacerlo a mi manera y el resultado es muy parecido 馃槃
P.D: si tienen un error de que no se encuentra la imagen es porque la ruta que debemos tener es del tailwind output a las imagenes, yo crei que era del archivo config a las imagenes pero no 馃槂

<main class="w-full pl-3 pt-3 ">
      <div id="recommended" class="flex h-52 flex-row overflow-scroll gap-10">
         <div class="card  w-44 h-52 flex flex-col basis-full justify-center items-center">
            <div class="rounded-t-lg w-44 h-3/5 bg-norway bg-cover">
            </div>
            <div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
               <p class="text-white font-bold text-xl">Noruega</p>
               <p class="text-white text-base">Paisajes Increibles</p>
            </div>
         </div>
         <div class="card  w-44 h-52 flex flex-col basis-full justify-center items-center">
            <div class="rounded-t-lg w-44 h-3/5 bg-new_york bg-cover">
            </div>
            <div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
               <p class="text-white font-bold text-xl">Noruega</p>
               <p class="text-white text-base">Paisajes Increibles</p>
            </div>
         </div>
         <div class="card  w-44 h-52 flex flex-col basis-full justify-center items-center">
            <div class="rounded-t-lg w-44 h-3/5 bg-yosemite bg-cover">
            </div>
            <div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
               <p class="text-white font-bold text-xl">Noruega</p>
               <p class="text-white text-base">Paisajes Increibles</p>
            </div>
         </div>
         <div class="card  w-44 h-52 flex flex-col basis-full justify-center items-center">
            <div class="rounded-t-lg w-44 h-3/5 bg-seattle bg-cover">
            </div>
            <div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
               <p class="text-white font-bold text-xl">Noruega</p>
               <p class="text-white text-base">Paisajes Increibles</p>
            </div>
         </div>
         <div class="card  w-44 h-52 flex flex-col basis-full justify-center items-center">
            <div class="rounded-t-lg w-44 h-3/5 bg-switzerland bg-cover">
            </div>
            <div class="rounded-b-lg w-44 h-2/5 bg-secondary px-4 ">
               <p class="text-white font-bold text-xl">Noruega</p>
               <p class="text-white text-base">Paisajes Increibles</p>
            </div>
         </div>
      </div>
   </main>