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

Clase 3 de 29 • Curso Básico de Tailwind 2 y 3

Resumen

¿Qué es Tailwind CSS y por qué es importante?

Tailwind CSS es un framework de CSS que ofrece un set de herramientas diseñadas para facilitar la construcción de interfaces web mediante la adición de estilos. Este enfoque permite acelerar el desarrollo web, ya que Tailwind se basa en clases predefinidas que puedes incorporar directamente en tu HTML. A diferencia de otros frameworks de CSS, Tailwind es 100% personalizable y está orientado a utilidades y no a componentes, lo que proporciona un nivel más alto de personalización para manejar estilos específicos.

¿Cómo se diferencian los frameworks de CSS más conocidos?

Existen varios frameworks de CSS que son muy populares y cada uno tiene sus propias fortalezas y peculiaridades. A continuación, se describen algunos de los más conocidos:

Bootstrap: Es un framework basado en componentes, conocido por su facilidad de uso y su capacidad para acelerar el desarrollo. Sin embargo, ofrece menos personalización en comparación con Tailwind, a menos que se realicen ajustes específicos como la modificación de colores.
Material UI: Está basado en el tema de Material Design, popularizado por Google y el sistema operativo Android. Está compuesto de componentes preconstruidos y se considera un "design system" debido a su complejidad y estructura integral.
Bulma: Es un framework modular que permite importar sólo los archivos necesarios, lo que lo hace eficiente y personalizable. Utiliza Sass para personalizar estilos y está basado en Flexbox, lo que simplifica el manejo de layouts.

¿Qué hace única a Tailwind CSS frente a otros frameworks?

Tailwind CSS se destaca por ser altamente modular, lo que permite una personalización al 100% desde el principio del proyecto. Puedes definir tu propia paleta de colores, tipografías y adaptar otras preferencias visuales, algo que no siempre es tan accesible en otros frameworks. Su enfoque basado en utilidades permite una personalización detallada de los estilos, lo cual se diferencia de los sistemas rígidos basados en componentes.

Además, Tailwind ofrece plugins como @tailwindcss/forms que facilitan la adición de estilos estándar a los formularios, simplificando el desarrollo sin perder la esencia de alta personalización.

Conclusiones reflejadas en los comentarios

Es importante considerar qué framework de CSS se adapta mejor a tus necesidades. Mientras algunos desarrolladores prefieren la estructura más flexible y adaptable de Tailwind CSS, otros pueden optar por la comodidad y simplicidad que ofrecen Bootstrap o Bulma. La elección depende de necesidades específicas del proyecto y de las preferencias personales. ¿Cuál crees que se adapta mejor a tus necesidades?

La comprensión y experimentación con estos frameworks te permitirá tomar decisiones informadas al seleccionar las herramientas adecuadas para tus proyectos de desarrollo web. ¡No dudes en explorar y compartir tu opinión y experiencia con otros en la comunidad!

Juan Gui Arenas

student•

Mi cerebro cuando dicen el nombre de Bulma :D

Martin Alvarez

student•

inmortal

Irving Caamal

student•

JAJAJA!

Juan Jiménez

student•

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.

María Del Pilar Chávez Gutiérrez

student•

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

Maria Elsa Tortello Ditta

student•

Somos dos

Alex hernandez mitre

student•

Omar Aguayo

student•

El curso está padre, y enseña mucho, pero no me ayuda la forma de hablar de la profesora, me hace tediosos los videos.

Alfonso Andres Zapata Guzman

student•

x1.75 o x2. De nada.

~ Que tal Platzinauta, ya conectamos en LinkedIn? ~

¡Que estas esperando! Conectemos en LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.

Andrés Leal

student•

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

Moisés de Jesús Cortés Castellanos

student•

Desde que lo conoci, hago lo mismo.

N40 M10

student•

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,

Fernando Quinteros Gutierrez

student•

🧐 ¿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

Diego Colín

student•

Nice

Oscar Rabadan Martinez

student•

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.

Ignacio batalla

student•

muy bueno el Material UI, lo use mucho tiempo

Juan Daniel Diaz Jaramillo

student•

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.

Josué Ramírez Hernández

student•

📝 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.

Miguel Angel Reyes Moreno

student•

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

Yerson Felipe Ramirez Garnica

student•

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

❤️ si te paso lo mismo :D

Ignacio batalla

student•

yes

Luis Berenguer

student•

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

Victor Prado Trujillo

student•

A mi también se me ha hecho un framework muy fácil de utilizar, con una curva de aprendizaje rápida y buena documentación.🤓

César Palma

student•

me anima a aprenderlo en algun momento, creo que después de aprender de material-ui cualquier otro será mas fácil xD

Ricardo Osorio

student•

¿Que significa que tailwind sea un framework orientado a utilidades? , es que no entiendo muy bien lo que significa que sea orientado a utilidades, agradezco a quien me pueda dar una analogia.

Josue Granados

student•

Que tal Ricardo! . En el mundo del software y la programación en general existen clases y/o métodos que estan disponibles para ti y son utiles para una cosa en especifico. A esto se le llama Utility Classes/Methods. Piensa por ejemplo en la clase Math en JavaScript, es una clase que no puedes instanciar pero sirve para proveerte con los métodos y constantes necesarias para hacer tus propios cálculos. El mismo principio aplica para Tailwind. . Tailwind es un framework enfocado a utilidades, esto quiere decir que viene con un montón de estilos predefinidos disponibles para ti, listos para usar en forma de clases, PERO cada uno hace una y solo una cosa en especifico. Algo así como legos, tu puedes tomar el lego que más necesites y crear tu propio conjunto de bloques. . Otros frameworks, como Bootstrap, estan enfocados a componentes. Esto quiere decir que las clases que te ofrecen son un conjunto de estilos, algo así como un conjunto de bloques ya armado. Por ejemplo la clase btn, para botones, quizá en el CSS rule tengan algo como esto:

/*Bootstrap*/

.btn {
    padding: 0.25em .0.75em;
    border: 1px solid blue;
    color: white;
    ...
}

Mientras que en Tailwind, por ejemplo, te ofrecen la clase flex, la cual unícamente convierte un elemento en un contenedor flex y nada más

/*Tailwind*/

.flex {
    display: flex;
}

Esto te da mas flexibilidad para jugar con diferentes estilos y adaptarlos a tu diseño, aúnque con las desventaja de tener largas lineas de código en tu HTML. . Te invito a leer m'as acerca de este approach en la documentación oficial aquí :)