Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 18
Preguntas 1
Me gustó la clase y lo referente a Tailwind está excelente, pero:
<form>
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
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>
el “focus:shadow-outline” cambio por “focus:ring-2”. 😃
¿A dónde se fueron todos?
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.
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>
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:
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…
colocar un div para colocar un texto es mala practica
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.