Tailwind CSS crash course
Tailwind es un framework CSS con una característica muy especial que lo diferencia de otros frameworks como Bootstrap o Bulma: no incluye componentes o elementos, sino clases básicas y utilidades para que tú mismo las mezcles creando los layouts que nececesites.
Tiene una pequeña curva de aprendizaje y debes de aprenderte la nomenclatura de sus clases CSS (las cuales replican las propiedades CSS que manipulan), pero no es nada que no pueda solucionarse dedicando tiempo y acudiendo a su maravillosa documentación.
En este tutorial de Tailwind daremos los primeros pasos replicando un par de componentes de la portada en Escuela Vue.
Conceptos mencionados en el tutorial
- Instalación https://tailwindcss.com/docs/installation
- Purge (para reducir el tamaño final): https://tailwindcss.com/docs/controlling-file-size
- Border y sus propiedades: https://tailwindcss.com/docs/border-style#app
- Responsive patterns https://tailwindcss.com/docs/responsive-design
- Apply directive https://tailwindcss.com/docs/functions-and-directives#apply
- Config file https://tailwindcss.com/docs/configuration
- Container centered
- Custom colors
- Font size: https://tailwindcss.com/docs/font-size#app
- Pseudo classes: https://tailwindcss.com/docs/pseudo-class-variants#last-child
Código resultante
<!-- Header nav -->
<article class="container my-3 md:flex justify-between items-center">
<!-- Left -->
<section class="p-2 md:flex items-center">
<a href="#" class="block mb-2 md:mr-6">
<img
class="mx-auto"
src="img/escuela-vue-logo.png"
alt="Escuela Vue"
width="200"
/>
</a>
<a href="#" class="nav-item active md:mb-0 md:mr-4">Portada</a>
<a href="#" class="nav-item md:mb-0 md:mr-4">Empieza</a>
<a href="#" class="nav-item md:mb-0 md:mr-4">Series</a>
<a href="#" class="nav-item md:mb-0 ">Comunidad</a>
</section>
<!-- Right -->
<section class="text-center">
<a href="#" class="mr-3 bg-azul text-white px-3 py-2 rounded">Perfil</a>
<a href="#" class="bg-gray-200 px-3 py-2 rounded">Logout</a>
</section>
</article>
<!-- End Header nav -->
<!-- Testimonials -->
<article class="p-5 bg-oscuro">
<h1 class="mb-3 text-center text-white text-xl">Algunos testimonios</h1>
<section class="md:flex">
<div class="p-6 mb-3 bg-white rounded-lg mr-3">
<img
class="testimonial"
src="img/testimonial.png"
alt="Testimonial"
width="100"
/>
<h2 class="font-bold text-center my-3">Jordi Villaró</h2>
<p>
Desde que descubrí Vue hace 5 años he sido fan de este framework tanto
para proyectos personales como profesionales. Escuela Vue es todo lo que
siempre he soñado respecto al desarrollo con este fantástico.
<a class="text-azul font-bold" href="#">...ver más</a>
</p>
</div>
<div class="p-6 mb-3 bg-white rounded-lg mr-3">
<img
class="testimonial"
src="img/testimonial.png"
alt="Testimonial"
width="100"
/>
<h2 class="font-bold text-center my-3">Jordi Villaró</h2>
<p>
Desde que descubrí Vue hace 5 años he sido fan de este framework tanto
para proyectos personales como profesionales. Escuela Vue es todo lo que
siempre he soñado respecto al desarrollo con este fantástico.
<a class="text-azul font-bold" href="#">...ver más</a>
</p>
</div>
<div class="p-6 bg-white rounded-lg">
<img
class="testimonial"
src="img/testimonial.png"
alt="Testimonial"
width="100"
/>
<h2 class="font-bold text-center my-3">Jordi Villaró</h2>
<p>
Desde que descubrí Vue hace 5 años he sido fan de este framework tanto
para proyectos personales como profesionales. Escuela Vue es todo lo que
siempre he soñado respecto al desarrollo con este fantástico.
<a class="text-azul font-bold" href="#">...ver más</a>
</p>
</div>
</section>
</article>
<!-- End Testimonials -->
¿Tienes alguna pregunta sobre Tailwind CSS crash course?
Resuelve todas tus dudas sobre Tailwind en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.