©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Tailwind CSS
Aprende TailwindCSS, el framework de diseño preferido por los desarrolladores que dominan CSS
Material disponible
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!
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
Objetivos del curso
Por qué debes aprender Tailwind CSS
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
- 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 avanzados
- Formularios
- Variantes con pseudo-clases
- Configuración de Tailwind
- Diseño de componentes responsive
- Diseño de un layout responsive
- Flexbox
- Configuración y personalización de breakpoints
- Cómo personalizar temas
- Tipografías
- Optimizar el CSS
- Integración con otros workflow como Laravel o Webpack
- Grid layout
- SVG
- Efectos, transformaciones, transiciones y animación
En esta clase creamos dos proyectos en los cuales se aplica Tailwind CSS. ç
- Aplicación de Angular, en la que mostramos cómo instalar de forma sencilla toda la configuración, usando Angular Schematics y donde se desarrolla un componente en el que se aplican los estilos con Tailwind.
- Un proyecto creado desde cero con Webpack, donde se muestra cómo se compila en Javascript y el CSS y cómo se aplica PostCSS dentro de Webpack y a su vez todo el sistema de compilación mediante el plugin de Tailwind.
Contenidos Extra
En esta clase vamos a ver un resumen comparativo entre frameworks basados en clases de utilidad y basados en componentes. Luego veremos los primeros pasos en Tailwind y veremos cómo usar bibliotecas de componentes basados en Tailwind CSS que nos pueden ofrecer las mismas ventajas que obtenemos con frameworks de componentes, además de las ventajas de las clases de utilidad. Veremos en concreto cómo trabajar con DaisyUI y Preline UI.
Valoraciones
Jesús
Interesante su contenido
Visualnacert
Maria García Huertas
El curso ha estado muy bien. Ha sido muy práctico y los ejemplos bastante buenos, además que el framework CSS me ha convencido bastante.
DOCAL ARTAJO / JAIME
Muy didáctico
Juan Miguel Gomez Rodriguez
Diego Montero
Carlos Abrisqueta Valcárcel
Daniel Diez Mardomingo
Muy bien. Me parece una herramienta maravillosa para maquetar. La de tiempo que he perdido con bootstrap y crenado mis estilos en css. Con esto puedo ir mucho más rápido.
Leonardo Hakim
Excelente utilidad y muy bien explicado por Miguel Angel! Recomendado!
Hector Enrique Rojas Cano
Contenido muy completo. 100% recomendado.
Edson Suarez
El curso de Tailwind me ha parecido muy útil, tanto por el framework como por las clases de Miguel.
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.