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 -->