¿Cómo funciona Tailwind? Y otros frameworks de CSS

Mi cerebro cuando dicen el nombre de Bulma 😄

Framework CSS → Conjunto de herramientas para construir una interfaz web con CSS, que nos permite agilizar el desarrollo.

Tailwind es un framework utility-first y está diseñado para acelerar el proceso de diseño al eliminar la necesidad de usar CSS.

Características:

• Representado mediante clases, definimos nuestros estilos.
• Orientado a utilidades, vuelve el desarrollo más personalizable.
• Personalizable, Tailwind es 100% personalizable a diferencia de otros frameworks.

Otros frameworks de CSS:

• Bootstrap:
  • Basado en componentes.
  • Abstracción en la creación de los componentes.
  • Poco personalizable.
• Material UI:
  • Basado en componentes pre-construidos.
  • Basado en el tema de Material.
  • Design System.
• Bulma:
  • Framework modular, permite importar los archivos que se necesiten utilizar.
  • Personalizable, mediante la creación de variables en SASS se pueden agregar estilos personalizados.
  • Basado en Flexbox.

No puedo creer que tardé tanto en llegar a este curso 🥲

Buenísimo Tailwind CSS, lo uso en todos mis proyectos!

tailwind utiliza licencia mit, importante saber que licencia utiliza la tecnología antes de pensar en usarla en producción de lo contrario te puede meter en bastantes problemas y es un tema que la mayoría nunca menciona o conoce,

🧐 ¿Cómo funciona Tailwind? Y otros frameworks de CSS

Ideas/conceptos claves

Framework CSS conjunto de herramientas para construir una interfaz web con CSS, que nos permite agilizar el desarrollo

Utilidades En CSS las clases de tipo utilidad son aquellas que tienen un único propósito y son nombrados de esa característica, como ser bg-blue, el cual pondrá el siguiente código background-color: blue

Apuntes

Características de Tailwind

• Representado mediante clases ⇒ Puedes estilizar tu website mayormente con clases
• Orientado a utilidades
• Personalizable ⇒ Se le puede agregar tanto como colores, tipografías, etc. de forma personalizable

Otros frameworks CSS

Bootstrap

• Basado en componentes
• Abstracción en la creación de los componentes
• Poco personalizable ⇒ Si bien es posible personalizar, su enfoque inicial no es ese

Material UI

• Componentes pre-construidos
• Basado en el tema de Material ⇒ Es el sistema de diseño de Google
• Design System ⇒ Al ser un framework CSS el cual contiene componentes y es un poco más complejo se vuelve un design system

Bulma

• Modular ⇒ Te permite importar los archivos y características que requieras en tus sitios
• Personalizable ⇒ Ya que implementa variables de Sass, puedes agregar todo tipo de variables
• Basado en Flexbox

📌 **RESUMEN:** Tailwind es un framework CSS el cual está enfocado en implementar utilidades y es personalizable. Existen otros frameworks como Bootstrap, Material UI, Bulma, etc. Cada uno con un propósito diferente

Algunos de los **frameworks **mas conocidos:

• Bootstrap (poco personalizable)
• Material UI (componentes pre-construidos)
• Bulma (Modular)

Y el que aquí nos ocupa, Tailwind CSS y el que para mi es el mejor de todos por lo que he podido ver y probar, tanto por lo personalizable que resulta como por lo sencillo que es aprenderlo.

Me terminé un curso en otra plataforma de Tailwind y me encantó, ahora vengo a reforzar mis conocimientos acá.

Pienso que Tailwind es para un proyecto que le vayas a dedicar amor y tiempo y que frameworks como Bootstrap es para hacer algo a la ligera.

📝 Mi resumen:

.

¿Cómo funciona Tailwind CSS?

Tailwind es un framework de CSS de código abierto para el diseño de páginas web, esto quiere decir que es un conjunto de herramientas para construir interfaces web con CSS, que nos permiten agilizar el desarrollo.
.

Caracteristicas de Tailwind

• Representado mediante clases, esto lo vamos a ver directamente reflejado cuando estemos programando nuestro documento, ya que vamos a estar agregando nuestras clases para definir nuestros estilos.
• Orientado a utilidades, el hecho de que este orientado a utilidades y no a componentes nos permite tener más personalización en el desarrollo.
• Personalizable, a diferencia de otros frameworks Tailwind nos permite poder personalizar nuestro proyecto al 100%, ya que podemos crear nuestra paleta de colores, agregar tipografías e incluso hacer uso de plugins.

.

Algunos de los frameworks de CSS más conocidos son:

• Bootstrap: a diferencia de Tailwind esta basado en componentes, sin embargo cuenta con una abstracción en la creación de los componentes, su desventaja es su poca personalización.

• Material UI: este framework esta basado en componentes pre-construidos, además de ser basado en el tema de Material, el tema de Material es el que normalmente vemos en aplicaciones como en la Suit de Google o el sistema operativo Android.

  Al ser Material UI un framework un poco más grande, compuesto de componentes y un poco más complejo se vuelve un Design System.

• Bulma: por ultimo este framework es modular, esto quiere decir que nos va a permitir importar únicamente los archivos que necesitemos utilizar, además se vuelve personalizable ya que mediante la creación de variables de sass podemos agregar todos los estilos que queramos, otro punto importante es que esta basado en Flexbox.

No sé qué tiene Tailwind que me gusta mucho y Bootstrap que me cae mal jajaaj

Yo llegue aca por el tik tok que ella saco :3

❤️ si te paso lo mismo 😄

A mi el framework que más me gusta es Chakra UI

Tailwind ✨

Año usando Bootstrap y Material (Angular Material y Materialize). Es momento de conocer Tailwind.

😎 Platzi cuenta con curso de otros Frameworks, para que complementen su conociiento.

• Curso de Bootstrap 4 este está desactualizado pero funciona.
• Curso de Materialize Framework de Material UI.
• Curso Básico de Material UI con React

Material UI me llamó la atención 😄

Ella habla tierno e incluso es idea mía o ¿parece que habla como si tuviera bracket?.

Yo creía que, “Material UI”, sólo se podía utilizar en proyectos en dónde se utilizara React.

La neta, me quiero casar con tailwind. Tiene como nombre tailandés.

Otro Frameworks es ChakraUI. (Para React)
Link de ChakraUI

He utilizado los 4 y la verdad es que todo depende de las necesidades. Si yo requiero un desarrollo rapido, me voy a ir por Bootstrap porque ya todo lo tiene hecho. Ni tailwind te va a permitir esa velocidad aunque en efecto si agiliza el desarrollo. Lo malo de Bootstrap por supuesto es que la personalizacion va a llevar tiempo y si no lo haces sera un UI que se parecera a muchos UI de internet.

He probado otros Frameworks de CSS, y comencé hace poco con Tailwind, inicialmente estaba algo indeciso si probarlo o no debido a tanto amor y odio que lleva consigo.
Sinceramente es un buen framework, y cómo todo, tiene sus ventajas y desventajas. Algo que me gusta es que Tailwind ah ideado soluciones para algunas de sus desventajas

Si tuviera que dar recomendaciones de Framework para Css, Tailwind sin duda estaría en ella

Tailwind

Características

• Representando mediante clases
• Orientado a utilidades
• Personalizable

Frameworks de CSS

• Bootstrap
• Bulma
• Tailwind
• Material UI