No tienes acceso a esta clase

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

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Forms

23/29
Recursos

Aportes 19

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Me gust贸 la clase y lo referente a Tailwind est谩 excelente, pero:

  • Aunque no sea funcional, si es un formulario deber铆a tener su etiqueta <form>
  • Los nombres de los campos en div??? para eso existe <label for="">
  • Cuando miramos la paleta de colores le pasaron unos colores para call to action, entonces solo sigui贸 los 2 principales y el resto inventando

JAJA perd贸n si soy fastidioso con este comentario, respecto a Tailwind est谩 excelente el curso y excelente profesor. Pero lo anterior me parecier贸n unos peque帽os errores jaja


el 鈥渇ocus:shadow-outline鈥 cambio por 鈥渇ocus:ring-2鈥. 馃槂

Con dise帽o responsive:

    <div class="mt-8 mx-2 md:mx-auto w-full md:w-1/2">
      <div>
        <div>Nombre</div>
        <input class="w-full py-1 px-4 rounded border border-blue-300 bg-gray-300 text-gray-800 placeholder-secondary leading-snug hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Nombre">
      </div>
      <div>
        <div>Email</div>
        <input class="w-full py-1 px-4 rounded border border-blue-300 bg-gray-300 text-gray-800 placeholder-secondary leading-snug hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Email">
      </div>
      <div>
        <div>Comentarios</div>
        <textarea class="w-full py-1 px-4 rounded border border-blue-300 bg-gray-300 text-gray-800 placeholder-secondary leading-snug hover:bg-white focus:outline-none focus:shadow-outline" name="" id="" rows="3"></textarea>
      </div>
      <div>
        <button class="block mx-auto px-4 py-2 rounded shadow-xl bg-gray-500 hover:shadow-none hover:bg-gray-700 hover:text-white">Enviar</button>
      </div>
    </div>

Antes de pasar a la maquetaci贸n con Tailwind la pagina debe estar dise帽ada en un wireframe de preferencia para no gastar tiempo viendo que opciones quedar铆an mejor.

驴A d贸nde se fueron todos?

S贸lo como comentario ya que no es clase de buenas pr谩cticas de HTML, en el caso de los formularios en lugar de utilizar <div>Nombre</div> una buena pr谩ctica ser铆a el utilizar la etiqueta <label> se帽alando el id al que corresponde ese elemento:

<div>
  <label for="fname">Nombre</label>
  <input class="鈥" type="text" id="fname" placeholder="Nombre" />
</div>

Esto para que en dispositivos m贸viles, cuando el usuario de click (touch) en el nombre, en autom谩tico tambi茅n se active el input de formulario y comience a escribir. Esto puede suceder muy a menudo ya que depender谩 de la habilidad motriz o visual del usuario o la calidad y el tama帽o de su pantalla.

Chicos, yo llevo el proyecto as铆.

Aqu铆 les dejo el c贸digo del formulario.

<section class="p-8 md:px-32 lg:px-80 bg-white" id="contact">
      <h3 class="text-3xl text-center font-semibold text-gray-900 capitalize">Contact us</h3>
      <form>
        <div class="mt-3">
          <label class="block text-lg text-gray-700" for="name">Name</label>
          <input placeholder="What's your name?" class="bg-gray-200 px-2 w-full h-10 rounded-md focus:outline-none focus:shadow-outline" type="text" id="name">
        </div>
        
        <div class="mt-3">
          <label class="block text-lg text-gray-700" for="email">Email</label>
          <input placeholder="What's your email address?" class="bg-gray-200 px-2 w-full h-10 rounded-md focus:outline-none focus:shadow-outline" type="text" id="email">
        </div>

        <div class="mt-3">
          <label class="block text-lg text-gray-700" for="comments">Comments</label>
          <textarea placeholder="Write a comment" class="bg-gray-200 p-2 w-full h-20 lg:h-24 rounded-md leading-snug focus:outline-none focus:shadow-outline" name="comments" id="comments"></textarea>
        </div>

        <button class="bg-primary md:px-20 px-10 py-3 text-lg m-auto block mt-3 text-gray-900 rounded-md font-medium">Enviar</button>
      </form>
    </section>

Ser谩 cuesti贸n de acostumbrarse a usar muchas clases, pero en general lo veo 煤til en vez de estar escribiendo cientos de lineas de css鈥

Si alguien tiene problemas con el footer (ya que no me aparecia hasta el final de la pagina. Lo que hice fue quitarle las lineas de absolute bottom-0 y con eso pude solucionar mi problema

Mobile:

Tablet:

Escritorio:

colocar un div para colocar un texto es mala practica

Que malas practicas, en los cursos de css y html b谩sico y definitivo mencionan la importancia del uso de las etiquetas html como la etiqueta form. Aun que sea maquetaci贸n deber铆amos respetar los conceptos b谩sicos y las buenas practicas previas.

tailwind rocks!

<!-- FORMS -->

 <!-- FORMS -->
        <form class="mx-2">
            <div>
                <div>Nombre</div>
                <input class="w-full leading-snug text-gray-500 py-1 px-4 rounded border border-blue-300 bg-gray-200 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" type="text" placeholder="Nombre"><!-- leading snug controla el espacio entre lineas -->
            </div>
            <div>
                <div>Email</div>
                <input class="w-full leading-snug text-gray-500 py-1 px-4 rounded border border-blue-300 bg-gray-200 placeholder-secondary hover:bg-white focus:outline-none focus:shadow-outline" type="email" placeholder="Email"><!-- leading snug controla el espacio entre lineas -->
            </div>
            <div>
                <div>Comentarios</div>
                <textarea class="w-full leading-snug text-gray-500 py-1 px-4 rounded border border-blue-300 bg-gray-200 placeholder-secondary hover:bg-white  focus:outline-none focus:shadow-outline" name="" id="" cols="30" rows="10">
                </textarea>
            </div>

            <div>
                <button class="rounded shadow-xl py-1 px-4 bg-gray-400 mx-auto block hover:shadow-none hover:bg-gray-700 hover:text-white">
                    Enviar 
                </button>
            </div>
        </form>

desktop 鉂わ笍

f