CursosEmpresasBlogLiveConfPrecios

Conclusiones y qué sigue

Clase 29 de 29 • Curso de Tailwind CSS 1

Clase anteriorSiguiente clase

Contenido del curso

Introducción, instalación y ambiente de desarrollo
  • 1
    ¿Qué es Tailwind CSS?

    ¿Qué es Tailwind CSS?

    02:24
  • 2
    Instalación y ambiente de desarrollo

    Instalación y ambiente de desarrollo

    08:26
  • 3
    Directivas de Tailwind

    Directivas de Tailwind

    01:59
Conceptos básicos
  • 4
    Personalización y configuración

    Personalización y configuración

    01:57
  • 5
    Responsive Design, Mobile First y Utility First

    Responsive Design, Mobile First y Utility First

    03:55
Utilerías
  • 6
    Colores

    Colores

    04:25
  • 7

    Cómo crear grids o columnas en Tailwind CSS

    04:41
  • 8
    Dimensiones y Espacios

    Dimensiones y Espacios

    08:57
  • 9
    Cambiando las propiedades de la tipografía

    Cambiando las propiedades de la tipografía

    04:59
  • 10
    Ajustando el espaciado entre letras y líneas

    Ajustando el espaciado entre letras y líneas

    04:37
  • 11
    Display

    Display

    04:42
  • 12
    Flexbox

    Flexbox

    09:19
  • 13
    Crea tus propias utilerías

    Crea tus propias utilerías

    04:04
  • 14
    Entendiendo las variantes y las pseudo-clases

    Entendiendo las variantes y las pseudo-clases

    04:05
  • 15

    ¡Es hora de practicar!

    01:40
Proyecto: PlatziFood
  • 16
    Creando una card

    Creando una card

    05:55
  • 17
    Aplicando formato a la card

    Aplicando formato a la card

    09:06
  • 18
    Responsive design en la card

    Responsive design en la card

    05:41
  • 19
    Construye el header

    Construye el header

    07:32
  • 20
    Crea el footer

    Crea el footer

    09:46
  • 21
    Crea un banner

    Crea un banner

    06:32
  • 22
    Cómo integrar una card

    Cómo integrar una card

    08:47
  • 23
    Forms

    Forms

    10:02
  • 24
    Directivas de Apply

    Directivas de Apply

    02:57
  • 25
    Extraer componentes

    Extraer componentes

    08:11
  • 26
    Navbar

    Navbar

    08:51
  • 27
    Alpine JS

    Alpine JS

    03:32
  • 28
    Optimiza tu archivo: PurgeCSS y NanoCSS

    Optimiza tu archivo: PurgeCSS y NanoCSS

    03:56
Conclusiones
  • 29
    Conclusiones y qué sigue

    Conclusiones y qué sigue

    00:54
    Angelo Zambrano

    Angelo Zambrano

    student•
    hace 5 años

    Excelente curso! No más Bootstrap

    Roger Carlos Ariel Alba

    Roger Carlos Ariel Alba

    student•
    hace 6 años

    Hola a todos! Luego del curso me fui a la página de tailwind, se ha convertido por mucho en mi Framework CSS favorito.

    Les recomiendo el curso del autor en la misma página. En ingles, pero muy bueno. Además con VUeJS

      Sergio Andrés Martínez Ramírez

      Sergio Andrés Martínez Ramírez

      student•
      hace 6 años

      Además él tiene muy buenos cursos como el de Laravel TDD (aunque un poco costoso para los que vivimos en latinoamérica , especialmente Colombia por el valor del dolar) , otro de Vue y otros de UI. https://adamwathan.me/courses/

      Brian Hawkins

      Brian Hawkins

      student•
      hace 5 años

      Gracias por la recomendación! Está excelente todo lo que he visto hasta ahora!

    Marco Jaramillo Castro

    Marco Jaramillo Castro

    student•
    hace 5 años

    Si ya sabes html y css con esta hoja te ahorras muchas consultas a la documentación de tailwind

    tailwindcss-cheatsheet.jpg
      John Steven Bernal Gonzalez

      John Steven Bernal Gonzalez

      student•
      hace 5 años

      Muy util, gracias.

      Juan Otavalo

      Juan Otavalo

      student•
      hace 5 años

      esto si que sirvio hubiese sido bueno saverlo desde que empezó el curso

    Fernando Mejia

    Fernando Mejia

    student•
    hace 6 años

    Realmente increible curso por todos lados asi debieran ser siempre los cursos de platzi, una seccion de intro, una de ensenar ailsado cada funcionalidad y cada explicacion muy concisa y una seccion de proyecto con un scope llamativo pero corto, aparte extras como purgecss, nanocss y alpineJS increible, muchisimas gracias que buen curso

      Angel Cabrera

      Angel Cabrera

      student•
      hace 6 años

      Al principio cuando ensañaron el proyecto inicial, me parecía poco alentador, pero a medida que fue pasando el curso se puso mucho mejor!

    Christian España

    Christian España

    student•
    hace 6 años

    Muchas mas utilidades con tailwind https://github.com/aniftyco/awesome-tailwindcss

      Nathaly Stefani Riaño Bejarano

      Nathaly Stefani Riaño Bejarano

      student•
      hace 6 años

      Uff! Gran aporte, muchas gracias :green_heart:

    Andres Evaristo Ruiz Gonzalez

    Andres Evaristo Ruiz Gonzalez

    student•
    hace 5 años

    Si estaban usando Github, la siguiente instrucción envía lo de la carpeta public a GitHub pages y genera un link para visualizarlo:

    git subtree push --prefix PlatziFood/public origin gh-pages

    https://andres87mx.github.io/curso-tailwind-css/ :D

    Diego Fernando Rojas Quintero

    Diego Fernando Rojas Quintero

    student•
    hace 5 años

    ¿Como hago que solamente el contenido de la carpeta public sea enviado a github?

      Moisés Cedeño

      Moisés Cedeño

      student•
      hace 5 años

      Si quieres tenerlo como un Gitpage para que este como si fuese una página web con github.io deberías trabajar como si tu carpeta public fuese el root del proyecto,

      Pasos:

      1. Crear tu repo en github.
      2. Clona ese repo que creaste en alguna carpeta al nivel de public.
      3. Copia tus archivos de public a la carpeta del repo que se acaba de clonar.
      4. Comitea o guardas los cambios.
      5. Push a github y con eso ya podrías usarlo como github pages.

      Otro método es:

      1. Entrar a tu carpeta public.
      2. Cambiar o establecer una url remota de repositorio con git set remote url, el comando sería: git remote set-url origin https://github.com/USERNAME/REPOSITORY.git
      3. Si hay algún conflito (que en ocasiones los hay) resolverlo en local.
      4. Comiteas o guardas los cambios.
      5. Lanzas el push a github.
      Moisés Cedeño

      Moisés Cedeño

      student•
      hace 5 años

      La documentación del Github para cambiar la url remota es:

      https://help.github.com/en/github/using-git/changing-a-remotes-url

      Saludos, compañero

    Luis Rivero

    Luis Rivero

    student•
    hace 5 años

    Tengo una duda, ¿Se puede utilizar Tailwind y Sass al mismo tiempo?

      David Gutiérrez Tovar

      David Gutiérrez Tovar

      student•
      hace 5 años

      si se puede amigo, te comparto la documentación https://tailwindcss.com/docs/using-with-preprocessors

    Christian Alvarenga

    Christian Alvarenga

    student•
    hace 4 años

    Me gusto bastante el curso aunque, me gustaría que se actualice un poco porque algunos pequeños detalles me dieron grandes problemas pero, dentro de todo supero bien.

    Cesar Velásquez Córdova

    Cesar Velásquez Córdova

    student•
    hace 5 años

    Mi último para despedirnos bien, aqui les dejo este repositorio que tiene muchos links que pueden servirles de guía con este fabuloso framework de CSS:

    Awesome Tailwind CSS

    Alberto Castro Flores

    Alberto Castro Flores

    student•
    hace 5 años

    Espero tomar mas cursos con este profesor, mi favorito junto a diego.

    Luis David Arias Manjarrez

    Luis David Arias Manjarrez

    student•
    hace 5 años

    Me gustó bastante esta librería, aún así hay que saber balancear su uso, tener muchos elementos con la misma clase puede ser engorroso al momento de hacer cambios.

    Dejo aquí unos patrones de diseño para usarlos en react y así evitar escribir tanto código. PD: Solo miren los tips, la configuración de tailwind en react en ese articulo es un poco anticuada.

    Juan Esteban García Giraldo

    Juan Esteban García Giraldo

    student•
    hace 5 años

    a alguien mas el purgecss le elimino las medidas de las pantallas como el md o lg?

      Gonzalo Pimentel

      Gonzalo Pimentel

      student•
      hace 5 años

      Sí y se soluciona agregando el defaultExtractor en el plugin de purgecss, así:

      Screenshot at 11-24-38.png

    Wonder Jhonny Diaz Gonzalez

    Wonder Jhonny Diaz Gonzalez

    student•
    hace 6 años

    Si quieren ver componentes de la comunidad Tailwind Components

      Hernán Arica

      Hernán Arica

      student•
      hace 6 años

      Buenisimo amigo!!

    Camilo Alexander Velandia Velandia

    Camilo Alexander Velandia Velandia

    student•
    hace 6 años

    excelente conocer nuevas herramientas

    Carlos Eduardo Magallon Zepeda

    Carlos Eduardo Magallon Zepeda

    student•
    hace 5 años

    Ahora que he llegado al final del curso puedo decir que Tailwind es bastante más cómodo de utilizar que bootstrap y otros frameworks

    Gonzalo Pimentel

    Gonzalo Pimentel

    student•
    hace 5 años

    Excelente curso! Ahora estoy al borde de dejar a mi querido Bootstrap jaja

    Juan Esteban Márquez Parra

    Juan Esteban Márquez Parra

    student•
    hace 6 años

    El repositorio de Github no esta completo. Algunos archivos no tienen todo el contenido.

    Fabián Fernández

    Fabián Fernández

    student•
    hace 6 años

    Demasiado versátil Tailwind, lo probare en mi siguiente proyecto. Ya existe una librería Ui pero es paga les dejo el link por si quieren ver una buena referencia https://tailwindui.com/

    Erick Daniel Pérez Mata

    Erick Daniel Pérez Mata

    student•
    hace 6 años

    ¿Comó sería el deployment en GitHub?

      Roger Carlos Ariel Alba

      Roger Carlos Ariel Alba

      student•
      hace 6 años

      Hola!

      Tendrías que hacer deploy del contenido de public como lo harías con cualquier optro deploy.

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads