Creamos la misma aplicación con CSS Vanilla y Tailwind CSS y te contamos las diferencias
HTML-код
- Опубликовано: 6 сен 2024
- 👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento...
En este vídeo creamos la misma aplicación con CSS Vanilla y Tailwind CSS y te contamos las diferencias.
Aquí el repositorio: github.com/glr...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
- Cómo integrar Storybook en tus proyectos de React: • Cómo integrar Storyboo...
Esta introducción a Node fue impartida por Guillermo Rodas Senior Full stack Engineer y Google Developer Expert:
/ guillermorodas
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas....
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.
Me pregunto si tailwind permite hacer un agrupado de clases y llamarlo por ejemplo "Card-Style" en donde ese agrupado uno ya haya descrito los estilos para los elementos que lo componen (div id="nombre de la tarjeta" , img, h2, p, button), obvio usando la notacion de tailwind. Si sabes te agradezco mucho, seria excelente que existiera, eso permitiria crear un portafolio simplificado de Estilos listos para su uso al momento de necesitarlos sin tener que casi, cargar todo el .css pesado o sin tener que maquetar por cada vista por completo. Solo se cargaría y en tal caso hacer las pruebas de renderizado. Saludos! Tambien me queda la duda, de si esto existiera, muy probablemente le aumentaria la carga/tamaño al .css afectando la optimizacion en buscadores (SEO).
Me respondo...
That's not what you should do in Tailwind. If you group your classes in CSS (even when using @apply) you're basically going back to normal CSS - having to come up with class names, managing selectors etc. Tailwind is there so that you don't have to do that. Consider that Tailwind might not be the best tool for you personally if you don't like one of the fundamental building blocks of it - using utility tokens - which is totally fine, lot's of people don't like it. -
Jakub Kotrs
@@Ruben-ie2km Exacto, es posible y puede tener sentido para ciertos casos, pero en general va en contra del proposito de Tailwind.
Excelente video!
Consulta, cómo haces para que el puntero tenga esos efectos tipo Halo?
Es un App para Mac que se llama "Cursor Pro"
No estoy seguro pero creo que debes anular el normalize que hace Tailwindcss por default, si no me equivoco, posiblemente esos casi 6kbs es puro normalize inyectado por @tailwind base, lo sé porque creo que una vez quité eso y al final solo me compiló el css que había declarado en las clases, mas mi propio normalize, estoy casi seguro que el peso sería menos.
Ahora, tambien habría que hacer el ejemplo de un proyecto mas grande, ya que Tailwindcss recicla constantemente las clases, pero en un archivo css, se le pone a cada clase que se declare.
Muy buena observación habría que hacer una prueba usando la misma base normalizadora. Yo suelo. usar el minireset CSS, que son solo 500 bytes minificado, si seguimos la idea de comparar frameworks vs no framework sigue siendo muy pesado, y muy posiblmente Tailwind requiere tener su propio normalize para garantizar el mismo look and feel siempre.
@@guillermorodas La mayoria de cosas de TW son clases de utilidades, entre mas las uses, mas pierde sentido el normalize base porque se sobreescribe, no es que usaramos TailwindUI, que tendria sentido el normalize, igual yo uso UnoCSS, asi que no estoy seguro ahora de TW, pero al video le hizo falta revisar el contenido del css resultante y ver que no mas le mete, omitir @tailwind base y ver si se rompe, yo si recuerdo haber obtenido un css compilado solo con lo que usé y pesaba muchisimo menos.
@@jjdevcode9635 La normalización de estilos y las clases de utilidades tienen dos propósitos muy diferentes, usar "mucho" Tailwind no te exime de la normalización. Por otro lado, desde la versión 3.0 de Tailwind, la capa base tiene que existir: "directive must be present for utilities like transforms, filters, and shadows to work as expected."
Sin embargo si puedes deshabilitar la capa normalizadora, deshabilitando "preflight" que esta basado en basado en modern-normalize, qué aun así es un normalizador muy liviano.
La realidad es que la mayoría de las veces se va a usar Tailwind con su propio normalizador, removerlo es un edge case. Se menciona lo del peso para que se considere como un punto cuando este sea realmente relevante no como una razón absoluta para no usar Tailwind, pues como sabemos tiene muchos otros beneficios.
Tal ves les suene anticuado pero prefiero sass, css, y como utlima opcion tailwind..
Tailwind es muy feo, todo verboso, lnsucia el HTML, no se como usan eso, Css es hermoso solito , pero es solo la opinion de un neófito, que nadie pidió pero igual la di ... Excelente el profe !!
Tailwind es verboso, no hay duda alguna. Pero es rapidísimo para poner estilos, y te ahorra mucho tiempo, y eso es valioso cuando trabajas en proyectos y tienes que cumplir con fechas. Finalmente depende de ti si ocuparlo o no, si la relación verbosidad-tiempo te parece aceptable o no.
Opino lo mismo y fíjate que uso los 2 bien, solo que para componentes si prefiero tailwind