Tailwind CSS crash course

Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue