Curso Tailwind CSS 4 desde cero

midudev

Resumen

Este curso práctico ofrece una inmersión completa en Tailwind CSS 4, explicando su filosofía 'Utility First', la cual prioriza el uso de clases de bajo nivel para construir interfaces rápidamente y sin necesidad de cambiar entre archivos CSS y markup. Aprenderás desde la configuración inicial, pasando por el manejo de responsividad, el uso de herramientas de CLI para producción, hasta la implementación de temas personalizados, animaciones con plugins y la correcta estructuración de componentes para evitar la verbosidad excesiva en el HTML.

Capítulos

  1. 0:09Fundamentos de Tailwind CSS 4
  2. 0:21Qué es Utility First
  3. 2:18Diferencia con CSS en línea
  4. 4:20Ventajas de rendimiento
  5. 5:18Técnicas Avanzadas de Estilos
  6. 24:49Uso de estados (Hover, Focus)
  7. 37:08Gestión de máscaras
  8. 55:57Instalación y Configuración CLI
  9. 56:09Inicialización del proyecto
  10. 1:00:23Compilación de estilos
  11. 1:00:25Uso del modo Watch
  12. 1:02:22Sistema de Temas y Variables
  13. 1:02:41Creación de colores personalizados
  14. 1:05:29Definición de Breakpoints
  15. 1:10:23Buenas prácticas y Ecosistema
  16. 1:10:34La polémica del @apply
  17. 1:20:22Agrupación con Group
  18. 1:28:47Configuración de fuentes
  19. 1:33:15Uso de Plugins
  20. 1:36:18Despliegue a producción

Temas tratados

  • Introducción y Filosofía
  • Configuración y Herramientas
  • Responsive Design
  • Componentización
  • Personalización y Temas
  • Animaciones y Plugins

Extracto de la transcripción

Hoy tenemos curso de Telwin CSS 4. Telwin CSS. A ver, Telwin, ¿qué es Telwin? Primera pregunta, pregunta del millón. Telwin es un framework CSS, ¿vale? Un framework CSS un poquito especial porque se le llama Utility First. ¿Qué es esto de utility first? Primero, utilidades. ¿Qué quiere decir esto? Pues que lo que hace Telwin es proporcionarte una serie de clases de bajo nivel para construir interfaces de forma rápida y y coherente. ¿Qué es esto de las clases de bajo nivel? Pues son clases que en realidad son utilidades, que hacen una cosa en concreto. A diferencia de otros frameworks de CSS que tú lo que tienes un botón, ¿vale? Y ya te dibuja un botón. Lo que te, mira, vamos a poner un ejemplo de Boostrap, que es uno de los más famosos, ¿vale? que también tiene algunas utilidades de clase, pero casi todo lo que tendríamos aquí más bien es que quieres pintar un botón, pues nada, te pones…