Curso de Tailwind CSS

Aprende TailwindCSS, el framework de diseño preferido por los desarrolladores que dominan CSS
Inscripciones abiertas
Intermedio
5 Clases 8 h (aprox.)
75€
59€
Precio en promoción

Próxima clase

Viernes 04 de diciembre

h

Añadir a Google Calendar

Tailwind es un framework de diseño que viene a competir con otros conocidos frameworks como Bootstrap o Materialize. Sin embargo, Tailwind tiene algunas novedades que han provocado que una numerosa comunidad esté migrando sus costumbres y adoptando el nuevo workflow de trabajo que propone.

Existen diversas diferencias que hacen a Tailwind un framework más atractivo para los diseñadores. Mientras que Bootstrap está guiado por componentes, Tailwind está guiado por clases de utilidad. Esto implica que Tailwind tiene muy pocos componentes, pero muchas clases CSS para obtener transformaciones muy concretas en el estilo de los elementos. En la práctica hace que, mientras que en Bootstrap necesitas escribir bastante CSS para adaptar los componentes, y en ocasiones un duro esfuerzo para encontrar selectores capaces de conseguir llegar donde quieres, con Tailwind prácticamente no necesitas escribir más CSS del que te aporta el framework y eres capaz de crear los componentes a medida que realmente vayas a utilizar.

En otras palabras, es mucho más flexible y completamente adaptable. Es un framework para quien entiende CSS y quiere simplemente alcanzar una mayor productividad, manteniendo el desarrollo bajo control. Para diseñadores que desean personalizaciones únicas en cada proyecto, en vez de componentes aburridos que son idénticos o muy similares en todos los sitios.

Además, Tailwind viene de casa con todas las herramientas que necesitas para poder optimizar tu código CSS y mantener en producción estrictamente aquellas partes que necesitas. Ni una clase más! 

Qué aprenderé en el Curso de Tailwind CSS

  • Usar Tailwind con PostCSS, Webpack y Laravel Mix
  • Compilar el CSS por medio de comandos y live-reload
  • Desarrollar HTML usando las clases de utilidad de Tailwind
  • Crear componentes personalizados y reutilizables
  • Desarrollo responsive
  • Crear y personalizar el tema de diseño
  • Desarrollar un sitio web completo con Tailwind
  • Optimizar el código CSS generado

Objetivos del curso

Explicar cómo usar Tailwind CSS de forma que desarrolladores y diseñadores puedan sacarle el máximo partido a la herramienta. Cómo escribir un HTML que aproveche las clases ofrecidas por el framework, que sea adaptable a todos los dispositivos y único para cada proyecto.

Mostrar diversas configuraciones de integración de Tailwind en los workflow más habituales, con herramientas como Webpack, PostCSS y Laravel. Explicar los procesos de optimización del código generado por Tailwind para obtener un archivo CSS ligero.

Por qué debes aprender Tailwind CSS

El enfoque de Tailwind permite mucha mayor agilidad en el desarrollo de proyectos frontend, con una versatilidad que no ofrecen los frameworks de diseño anteriores.

  • Si trabajas con Boostrap, Materialize o similares observarás que eres capaz de diseñar de una manera más cómoda y en menos tiempo con Tailwind.
  • Si nunca habías usado una herramienta como Bootstrap porque no te habías adaptado, porque la encontrabas rígida o falta de optimización, con Tailwind podrás comenzar a apreciar los frameworks de diseño.

Qué tengo que saber

Es necesario conocimientos de CSS y HTML. Serían también deseables algunos conocimientos del workflow de desarrollo con herramientas frontend, al menos entender qué es npm y cómo manejar la consola de comandos.

Clases y contenidos

Introducción y primeros pasos con Tailwind Gratis
  • Enfoque y ventajas de Tailwind
  • Instalación y configuración de PostCSS
  • Instalación y configuración de Tailwind
  • Aplicación de estilos en el HTML
  • Creación de componentes básicos
Diseño de componentes con Tailwind
  • Diseño de componentes avanzados
  • Formularios
  • Variantes con pseudo-clases
  • Configuración de Tailwind
Añadir a Google Calendar
Diseño responsive
  • Diseño de componentes responsive
  • Diseño de un layout responsive
  • Flexbox
  • Configuración y personalización de breakpoints
Añadir a Google Calendar
Personalización del tema y optimización
  • Cómo personalizar temas
  • Tipografías
  • Optimizar el CSS
  • Integración con otros workflow como Laravel o Webpack
Añadir a Google Calendar
Características avanzadas
  • Grid layout
  • SVG
  • Efectos, transformaciones, transiciones y animación
Añadir a Google Calendar

Cursos que también te pueden interesar

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete