Presentamos el primer curso de Tailwind de SocraTech, en el que podrás aprender a utilizar este framework de CSS desde cero. Un curso que ha realizado nuestro profesor del bootcamp, Sergio Jiménez, que está totalmente disponible en este post y en nuestro canal de YouTube.
Aunque este curso empieza desde cero, se requiere tener conocimientos previos de programación para poder entender los conceptos y fundamentos que se explican en él. Para ello, puedes apuntarte a nuestro Bootcamp Full Stack Web Developer y empezar a programar desde cero, sin necesidad de experiencia previa, para convertirte en un profesional en 16 semanas.
Qué es Tailwind
Antes de seguir hacia el curso, vamos a explicar qué es Tailwind para que entiendas en qué consiste esta herramienta y qué puedes esperar de todo lo que vas a aprender.
Tailwind es un framework de CSS de código abierto que permite diseñar interfaces de usuario de manera rápida y eficiente mediante una metodología basada en clases de utilidad. En lugar de usar estilos predefinidos o componentes específicos, Tailwind proporciona una amplia gama de clases que permiten personalizar el diseño directamente en el HTML, lo que facilita la creación de estilos sin necesidad de escribir CSS personalizado. Su enfoque modular y su integración con herramientas modernas como PostCSS y PurgeCSS lo hacen ideal para el desarrollo de aplicaciones web escalables y optimizadas.
Estructura del curso de Tailwind de SocraTech
Para que el aprendizaje en Tailwind sea más sencillo y ameno, hemos dividido el curso en diferentes partes para que puedas ir afianzando los conocimientos paso a paso. A continuación, encontrarás las distintas partes del curso por orden de aprendizaje.
Lección 0 – Introducción y novedades de Tailwind v4
En el primer vídeo del curso de Tailwind, se lleva a cabo un repaso de las novedades más significantes que supone la primera beta de Tailwind CSS 4.0. Écha un vistazo al siguiente vídeo y aprende más sobre este framework.
Aceptar el consentimiento para ver esto
Lección 1 – Instalación
En esta lección se da comienzo al curso y se explica cómo se realiza la instalación y configuración de Tailwind. Para ello, se muestra paso a paso cómo se realiza, compartiendo los pasos a seguir. Asimismo, se enseña la opción «preflight» con la que se puede realizar un «reset» del framework y se explican las diferencias con Tailwind 3.
Aceptar el consentimiento para ver esto
Lección 2 – Estilos generales (reset)
En este video se explica cómo crear nuestro propio reset de estilos, permitiendo establecer configuraciones generales sin generar conflictos de especificidad.
Aceptar el consentimiento para ver esto
Lección 3 – Estilos básicos, extensiones y plugins
En la lección 3 se enseña cómo aplicar estilos básicos en Tailwind utilizando clases de utilidad, incluyendo valores personalizados.
Además, te mostraremos un par de extensiones y un plugin que harán más sencillo el trabajo con este framework.
Aceptar el consentimiento para ver esto
Lección 4 – Responsive con @media y @container
Para la cuarta lección del curso de Tailwind, Sergio te enseña a aplicar estilos responsive utilizando @media y @container.
Aceptar el consentimiento para ver esto
Lección 5 – Crear y modificar clases de utilidad
A lo largo de esta lección vas a tener la ocasión de aprender a crear y modificar clases de utilidad. Para ello, verás como personalizar el tema, una opción que permite la versión 4 de Tailwind.
Aceptar el consentimiento para ver esto
Lección 6 – Modo oscuro personalizado
En la lección 6 de este curso de Tailwind, podrás aprender a crear un dark theme personalizado. Basándose en la documentación de Tailwind, Sergio te explica como implementar el darkmode (modo oscuro) con este framework.
Aceptar el consentimiento para ver esto
Lección 7 – Estilar componentes con @layer components
En el vídeo de la lección 7 vas a aprender a crear una clase con estilos para un componente, usando @layer components de CSS. Como verás, Sergio explica un caso singular en el que los estilos del componente no estén creados anteriormente. Por ello, esta parte del curso es interesante para ver qué hacer en situaciones como esa.
Aceptar el consentimiento para ver esto
Lección 8 – Estilar modal (:open, :backdrop, :starting)
En este video se estudia cómo construir y personalizar una ventana modal, incorporando efectos de entrada y salida. Para lograrlo, revisaremos el uso de selectores como :open, :backdrop, :starting, así como propiedades como transition-discrete.
Aceptar el consentimiento para ver esto
Si quieres aprender más sobre frameworks, programación y realizar proyectos reales dentro del sector tecnológico, apúntate a nuestro Bootcamp Full Stack Web Developer y empieza tu carrera como desarrollador web. ¡Te esperamos!
