Tailwind CSS crash course

Inicial Tailwind Aprende Tailwind en Escuela Vue

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

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 -->
Aprende Tailwind en Escuela Vue

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

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬