Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

¿Qué es Tailwind CSS?

1/29
Recursos
Transcripción

Aportes 57

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Esta medio feito el proyecto final pero hagamole!

por esta grafica decidi aprender Tailwind espero que sea tan bueno como parece
https://2019.stateofcss.com/technologies/css-frameworks/

Iba a empezar el curso pero al ver el proyecto final tan feo me desanime mucho pues lo menos que uno espera en un curso de css es una buena interface, quizás el curso se basa en aprender a conocer la herramienta pero al ver eso tan feo se puede hacer incluso con css puro…

Este curso no es de diseño, es para aprender a manejar Tailwind y todas sus herramientas.

La verdad se ve feo el diseño

¿Qué es TailWind CSS? 🧐
Es un framework que permite la contrucción de diseños altamente personalizados y de bajo nivel.

¿Por qué usar TailWind CSS? 🤨
A diferencia de otros frameworks css, como lo es bootstrap, que otorgan componentes prediseñados, Tailwind provee clases a bajo nivel de css que nos permiten construir diseños completamente personalizados por nostros y sin tener que pelear con el framework en sí.

Nos externa una responsividad desde la misma sintaxis.

Trabaja de manera amigable en el crecimiento de nuestro proyecto al proveernos herramientas para extraer clases.

Pero sobre todo, nos abre su código para personalizarlo ya que esta escrito en PostCSS y configurado en JavaScript.

Tailwind is more than a CSS framework, it’s an engine for creating design systems.

En el curso de Vue.JS básico impartido por @ignacio Anaya, utilizó Tailwind, no pares de aprender.

Programando desde los 8 años…eso fue ayer

Rayos en diseño no se ve agradable, quiero pensar que es solo el principio.

estuve investigando y encontre estas ventajas de Tailwind:

  1. el Atomic design permite poner las clases dentro de las mismas etiquetas de HTML, por lo tanto, es mas sencillo que el diseño de BEM. es decir, nos ahorramos nombrar las clases Bloque__elemento–modificador que en un proyecto grande puede tonarse complejo.

  2. a diferencia de bootstrap, Tailwind solo incluye el codigo que necesitamos y elimina las clases que no fueron utilizadas. esto se hace automaticamente en el proceso de compilacion y optimizacion, que mejora el performance Charla de Expertos en Css hablan de Tailwind

  3. tiene una comunidad que genera componentes gratuitos, al igual que bootstrap, pero con las ventajas del Tailwind (atomic Design). Pagina Gratuita de Componentes con Tailwind.

  4. hay funciones llamadas apply y layer que nos permiten ahorrar mucho codigo. es decir, tailwind nos da la flexibilidad del sistema Atomic design y la fortaleza componentes porque tambien podemor crear clases para crear nuestros propios componentes.

  5. hay un plugin maravilloso llamado Tailwind CSS intellisense que te autocompleta las variables, lo cual hace el desarrollo muy agradable.

  6. en el documento tailwind.config.js podemos configurar TODO, desde colores.

para visualizar este documento puedes escribir en la linea de comandos

<npx tailwindcss init tailwind.config.js --full>
  1. es una de las mejor rankeadas en el Informe de state of CSS 2020

Entiendo que la idea de llevar un curso es poder finalizar con un proyecto y ver tantos comentarios juzgando si es bonito o no hace pensar que aquí nadie aporta ni una sola linea de código extra al proyecto de los cursos… sería mejor que usemos los comentarios para mostrar los proyectos con las mejoras que cada uno consideró

Tailwind CSS es un framework de CSS para crear rápidamente interfaces de usuario personalizadas con la siguiente ideología:

  • Utility First
  • Mobile First
  • Responsive to the Core

Te permite crear tus propios componentes y utilizarlos cuando necesites.

Con TailwindCSS van a tener la libertad total para crear la página que ustedes quieran, sin tener que restringirse a una plantilla como en otros frameworks. Realmente vale la pena ver el curso en su totalidad.
Ánimo!

No sé ustedes pero yo vine aquí a aprender cómo usar este increíble framework, el diseño estético lo puedo encontrar en otros cursos dentro de Platzi.

El diseño esta horrible. Pero vamos a hacerle.

Vengo de aprender Materialize, y me encantó. Espero, aprender mucho de este curso.

No conocia sobre este framework css.Vamos a aprenderlo entonces

Si me agrada mas que bootstrap, lo empezare a utilizar más!

A darle, pienso terminar la carrera de arquitecto front y desarrollo web antes que termine el año

jajaja el proyecto esta medio rana pero este men se ve que sabe, regresare en el futuro a decirles como me fue

Tailwind: Permite crear tus propios componentes

El Diseño esta feo, pero me parecio muy poderosa esta herramienta 😃

HEY CHICOS! Quieren aprender TAILWIND de una forma mas interactiva y gratis!?

https://scrimba.com/learn/tailwind

Esto debe tener un gran potencial, empecemos!

El proyecto no tiene un diseño muy atractivo poque justamente es un curso básico de Tailwind que a diferencia de bootstrap o Materialize es mucho mas personalizable. Pero tiene la desventaja de que los estilos que trae por defecto son feos. Por lo tanto hay que personalizarlo completamente y eso seria para un curso mas avanzado de tailwind. A diferencia de Bootstrap tailwind es de mas bajo nivel. Posee menor abstracción. Eso lo hace 100% personalizable

Me gusto la configuración para iniciar, a mi parecer uno se ve algo de pro haciendo esas instalaciones y usando la terminal.
Estoy muy entusiasmado con este curso.

Vamo con todo a este curso. El diseño no me parece el mejor pero si me gusta poder introducirme en esta tecnologia que toma cada vez mas fuerza y tiene pocos años desde que salio! 😄

tailwind es lo mismo que sass, ajiliza el trabajo o lo simplifica? o es como bootstraps que es para colocar clases de estilos ya cuadrados?, por que para hacer ese proyecto en css es breve.

A mi si me gusto el diseño. No se si soy de malos gustos jeje. Les recomiendo leer sobre que es un framework de css. El articulo es super bueno y al igual que el profesor recomienda tener conocimientos sobre css, sobretodo.

Vamos a ver que tal este curso, espero utilizarlo en mis proyectos.

La espera ha valido la pena. Ya esperaba este curso. 😃

Alfin ah llegado el momento 😊

Tailwind Css, vengo con conocimientos muy básicos, espero aprender mucho acerca de este curso 😃

Lo use para una pequeña web y me encanto, muy rapido.

Tailwind CSS: Framework para crear interfaces de usuario Personalizadas
Por qué usar Tailwind? No tiene componentes, lo cual permite crear o personalizar nuestros componentes.

vamos!

He encontrado el framework ideal, y no perder la cabeza haciendo todo desde cero.

Me emociona este curso, darle!

Espero aprender mucho Victor es mi primer curso con usted.

That burger though…

Se feo el proyecto, espero que saquen otro donde haga el clon de YouTube o Spotify, seria de gran ayuda

Muy interesante el curso, además el tema de no tener componentes me parece una gran diferencia con los otros frameworks.

Lo poco que alcancé a ver, creo que esta librería me permitirá crear mucho diseño UI/UX sin necesidad de escribir tanto CSS.

Medio feito el proyecto :c

Vamo a Darle 💪

hasta las bolas, ese platzi Food!

El profesor debería tomar curso de UI, Skecth/Figma porque ese diseño no motiva a seguir el curso

Vamos a darle!

Excelente, vengo del curso de Foundation! Veremos si Tailwind es tan potente como dicen 😃

Vengo aquí porque si bien en Platzi aprendí a manejar CSS muy bien, la verdad que necesito agilizar los procesos para dedicarme más al código de programación.

Muy buena, pensé que no tenían U.u

Estoy de acuerdo con los compañeros ajaja no le dedicaron tiempo al proyecto y se ve algo feo. Pero bueno a adquirir los conocimientos y luego hacer mejores diseños jaja

f

En esta grafica podemos ver como a ganado popularidad, casi todos quienes lo prueban están conformes y mas gente se interesa por Tailwind, tiene buena punta la verdad!
https://2020.stateofcss.com/en-US/technologies/css-frameworks/

Un objetivo adicional al proyecto final del curso debe ser modificarlo para que sea más agradable a la vista 🤣

Las personas se quejan es del diseño, aquí se viene es aprender nada más.