Conclusiones y qué sigue

Clase 29 de 29 • Curso de Tailwind CSS 1

Clase anteriorSiguiente clase

Angelo Zambrano

student•

Excelente curso! No más Bootstrap

Roger Carlos Ariel Alba

student•

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

student•

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

student•

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

Marco Jaramillo Castro

student•

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

John Steven Bernal Gonzalez

student•

Muy util, gracias.

Juan Otavalo

student•

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

Fernando Mejia

student•

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

student•

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

student•

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

Nathaly Stefani Riaño Bejarano

student•

Uff! Gran aporte, muchas gracias :green_heart:

Andres Evaristo Ruiz Gonzalez

student•

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

student•

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

Moisés Cedeño

student•

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:

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

Otro método es:

Entrar a tu carpeta public.
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
Si hay algún conflito (que en ocasiones los hay) resolverlo en local.
Comiteas o guardas los cambios.
Lanzas el push a github.

Moisés Cedeño

student•

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

student•

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

David Gutiérrez Tovar

student•

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

Christian Alvarenga

student•

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

student•

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

student•

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

Luis David Arias Manjarrez

student•

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

student•

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

Gonzalo Pimentel

student•

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

Wonder Jhonny Diaz Gonzalez

student•

Si quieren ver componentes de la comunidad Tailwind Components

Hernán Arica

student•

Buenisimo amigo!!

Camilo Alexander Velandia Velandia

student•

excelente conocer nuevas herramientas

Carlos Eduardo Magallon Zepeda

student•

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

student•

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

Juan Esteban Márquez Parra

student•

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

Fabián Fernández

student•

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

student•

¿Comó sería el deployment en GitHub?

Roger Carlos Ariel Alba

student•

Hola!

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

Conclusiones y qué sigue

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue