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 32

Preguntas 8

Ordenar por:

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

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 …theme(‘colors’),

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 “truco” 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>

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

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>

Prof Ana Díaz, por favor ponga viscode word wrap , para poder ver todo el texto, aquí no vemos lo que hace, ok?

cuando agregas un “rounded-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

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.

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.

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

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

text-bold ya no es asi ahora es font-bold```js font-bold ```
Esta es mi configuración para que aparezca la imagen de la card: /\*\* @type {import('tailwindcss').Config} \*/export const content = \["./src/\*\*/\*.{html,js}", "./public/\*.{html,js}"];export const theme = { fontFamily: { 'Montserrat': \["Montserrat", "sans-serif"] }, backgroundColor: theme => ({ ...theme('colors'), 'primary': '#CC2D4A', 'secondary': '#8FA206', 'tertiary': '#61AEC9', }), textColor: theme => ({ ...theme('colors'), 'primary': '#CC2D4A', 'secondary': '#8FA206', 'tertiary': '#61AEC9', }), extend: { backgroundImage: { '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')", } }};export const plugins = \[ require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@tailwindcss/aspect-ratio"),]; agregue backgroundImage para que Tailwind reconociera las imagenes: ![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-09-26%2022-41-42-6e593bef-cec5-4e6d-83c6-efac0a3b420d.jpg)
Para los que les esté fallando el bg-norway, solo debeis quitar el . en la ruta de la url. Cómo originalmente lo colocaba: ```js norway: "url('./public/img/norway.jpg')", ``` Cómo lo cambié: ```js norway: "url('/public/img/norway.jpg')", ``` Solo con ese cambio logré ver la imagen desde la configuración de tailwind.
Un pequeño aporte de avances en esta clase: ![](https://static.platzi.com/media/user_upload/Dise%C3%B1ando%20nuestras%20cards-b4284f0f-efc8-4a3f-85dc-7f6602e90cf8.jpg)
<https://play.tailwindcss.com/fQviNFEgKm?size=778x1105> ![](https://static.platzi.com/media/user_upload/imagen-f878d86c-80e8-4cc3-beef-53cdeb056ea5.jpg)

Creo que le voy agarrando la onda xd

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>