EL PODER DE TAILWINDCSS!!! 🤩

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 96

  • @weengineers5999
    @weengineers5999 9 месяцев назад +106

    Ahora la mayoría de mis trabajos son hechas con tailwindcss, me gusta mucho > bootstrap

  • @carlosduran5460
    @carlosduran5460 4 месяца назад +51

    Tailwind: Pasar el peso del CSS al HTML.

    • @zetastv9001
      @zetastv9001 4 месяца назад

      La verdad 🤣

    • @jimmymontenegro8517
      @jimmymontenegro8517 2 месяца назад +1

      No, si usas muy repetidamente grupos de estilos, puedes crear en tailwind tu propia regla y asi en el html sólo usas un estilo. Ya se fue el html.

    • @zetastv9001
      @zetastv9001 2 месяца назад

      @@jimmymontenegro8517 Esto tambien es cierto pues. Pero lo que dice carlos tampoco esta muy lejano de la realidad...

  • @LuisVazquezP
    @LuisVazquezP 10 месяцев назад +87

    Just in time de tailwind, yo vengo de bootstrap fue mi primer framework de estilos, pero tailwind me gusto mucho lo considero mas simple en todos los asepctos.

  • @christianmiguez1379
    @christianmiguez1379 9 месяцев назад +6

    Estos Reels son la bomba

  • @elruchal
    @elruchal 9 месяцев назад +2

    PurgeCSS o analisis de calidad estáticos como SonarQube, etc suelen ayudar ;)

  • @fabiocroldan
    @fabiocroldan 8 месяцев назад +3

    Optimizar el archivo css no es exclusivo de tailwind, se puede hacer con cualquier css

  • @jesuselyizux
    @jesuselyizux 9 месяцев назад

    Nunca he usado Bootstrap pero desde que comencé a usar Tailwind se me ha hecho más fácil editar los estilos aunque aún me falta sacarle más provecho.

  • @jorgegatica
    @jorgegatica 10 дней назад

    Para activar pestaña Coverage
    👇
    Chrome: -Abres la consola - Pinchar los tres punto - "More Tools" - Pinchas "Coverage", y ahi filtras el archivo como en el video. Es de hace tiempo, pero por si alguien más tiene la duda

  • @Luisalfonso192
    @Luisalfonso192 10 месяцев назад +22

    Yo suelo usarlo para que mi Pokemon carry tenga el doble de velocidad... va bastante bien para pokes que no son muy rápidos en su tier.

  • @systemghost10
    @systemghost10 Месяц назад +1

    Me arden los ojos cada que veo tailwindcss en HTML

  • @LuisFerUIO
    @LuisFerUIO 5 месяцев назад

    Excelente!

  • @pabloqp7929
    @pabloqp7929 6 месяцев назад

    bueno saberlo gracias!

  • @sorcerereye
    @sorcerereye 10 месяцев назад +11

    Alguien que nos ayude a diferenciar:
    Si se utiliza Tailwind ya no se usa Sass (el del logo estilo Barbie)??
    O sea, el uno cubre las funciones del otro?
    O se complementan?

    • @kenay6436
      @kenay6436 10 месяцев назад +7

      Es que sass en sí no es framwork es como una ayuda a escribir css más rápido pero realmente si puedes utilizar sass con tailwind porque tailwind es el framwork

    • @kenay6436
      @kenay6436 10 месяцев назад +6

      Pero con las nuevas funciones de css sass se está ya dejando de usar un poco pero yo lo sigo usando

  • @jesusdanielgonzalezaleman9609
    @jesusdanielgonzalezaleman9609 8 месяцев назад

    Eso es por no manejar bien la descarga y habría que ver el framework, la página descarga todo y listo y eso está mal seguramente no está modilarizado

  • @mrdominguez
    @mrdominguez 5 месяцев назад

    Si, pero todo lo que te ahorras en el css lo perdés en el html agregando un montón de clases que vuelven más pesado ese archivo o el javascript en caso de que estés usando un framework

  • @DavidVargas-ep5zk
    @DavidVargas-ep5zk 22 дня назад

    Pero eso tambien se logra configurando Webpack o Vite para que elimine el css que no se usa.

  • @oscarrapray
    @oscarrapray 9 месяцев назад +15

    Se puede optimizar con sass para cargar en la página solo los estilos que se usa en esa página, tailwind es bueno, yo prefiero usar css, no me gusta tener elementos html con un montón de clases.

    • @jimmymontenegro8517
      @jimmymontenegro8517 2 месяца назад

      No es necesario , tailwind ofrece la solución a eso

    • @oscarrapray
      @oscarrapray 2 месяца назад +1

      claro, pero yo prefiero hacerlo con CSS, con tailwind te queda un HTML con un montón de clases que de solo verlo da sueño, con CSS haces lo mismo con 1 a 2 clases y el HTML queda mas limpio y fácil de entender.

    • @jimmymontenegro8517
      @jimmymontenegro8517 2 месяца назад

      @@oscarrapray no, con tw puedes evitar poner mil clases.

    • @oscarrapray
      @oscarrapray 2 месяца назад +1

      @@jimmymontenegro8517 claro que se puede, pero yo me voy al factor tiempo; si mi jefe me pide maquetarlo con tailwind lo voy maquetar con tailwind, aclarándole que mi productividad va bajar enormemente claro, lo que me tomaba 2 horas lo hare en 5 horas, si aun así me pide tailwind no hay problema, lo hago con tailwind, como dicen: donde manda capitán no manda marinero

  • @jeisongarzon6066
    @jeisongarzon6066 8 месяцев назад

    Solia usar tailwind pero ahora prefiero css puro con sass, sass tiene un montón de funcionalidades que te ayudan a agilizar el desarrollo de css y más con la modularizacion que me permite, con tailwind se ensucia demasiado el HTML.

    • @Cristian-gi4bs
      @Cristian-gi4bs 8 месяцев назад

      Xd casi siempre es al revés

    • @lacorz93
      @lacorz93 7 месяцев назад +1

      ​@@Cristian-gi4bs puedes explicar un poco tu respuesta? Estoy aprendiendo y me parece razonable lo que dice, lo tuyo no entiendo porque lo dices

  • @deliverydebalas6622
    @deliverydebalas6622 3 месяца назад

    eso tal vez haria la diferencia hace 20 años. Con la potencia de los ordenadores y la velocidad de internet modernos no hace ninguna diferencia significativa

  • @finon6515
    @finon6515 18 дней назад

    Intente usar un poco de tailwind, no vivo de la programación y por tanto, no veo ningún beneficio frente a vainilla css, sobretodo teniendo en cuenta las nuevas implementaciones, no me gusta como aborda css grid, se olvidaron de grid template area, me duelen los ojos de verlo, añadir media queries, temas, resulta antinatural. Si lo único bueno que tiene es que te filtra el css que no se usa, mal vamos. Como aborda css containers? Y que hay de css nesting? Usando tailwind no aprovechas el potencial de css. Menos mal que no tengo que verme obligado a utilizar tailwind.

  • @victorcruz4627
    @victorcruz4627 8 месяцев назад +1

    Cómo maneja eso tailwind no me imagino que tenga css sin archivos a menos que sea un cdn

    • @jimmymontenegro8517
      @jimmymontenegro8517 2 месяца назад +1

      Un comando que busca tus estilos y deja los necesarios. Node.js

  • @PinguGG_
    @PinguGG_ 10 месяцев назад

    eso es valido solo para css? o tambien en los js de mi angular? lo el unused del navegadoe

  • @towercontrol4450
    @towercontrol4450 7 месяцев назад +2

    Depende, es más práctico diferenciar el css del sitio por página para no caer en ese tipo de problemas, aunque si apoyo el uso de tailwind para sitios sencillos

  • @PabloRRomero
    @PabloRRomero 10 месяцев назад +2

    postcss seria en todo caso, lo que te ayuda a suprimir bloques en desuso y no tailwind en si, no?

    • @midulive
      @midulive  10 месяцев назад +12

      Tailwind usa PostCSS por debajo y lo hace Tailwind por ti automáticamente.

  • @MT-ox3gz
    @MT-ox3gz 10 месяцев назад +1

    Cómo se podría cargar el css para solo la sección que necesites?

  • @upalaif200
    @upalaif200 12 дней назад

    Lo acabo de probar con RUclips... 89,78% (en promedio) no se usa jajjajaja

  • @cerealez
    @cerealez 10 месяцев назад

    Igualmente se puede usar purge css para eliminar esos estilos del bundle

  • @ManuelCam
    @ManuelCam 4 месяца назад

    Eso es literalmente mi código, no se que tengo en los CSS😂

  • @Tele73727
    @Tele73727 10 месяцев назад +16

    Cual es la extensión para ver el css que no se utiliza?

    • @porquedeberiastenerungato_
      @porquedeberiastenerungato_ 10 месяцев назад +5

      Pestaña de coverage como puedes ver en todo el vídeo man

    • @imyeti9483
      @imyeti9483 10 месяцев назад +1

      Creo que es el f12, en el inspección

    • @nuevastecnologias7041
      @nuevastecnologias7041 8 месяцев назад

      En el inspector a la derecha los 3 puntos , more tools, coverage

    • @jorgegatica
      @jorgegatica 10 дней назад

      Chrome: -Abres la consola - Pinchar los tres punto - "More Tools" - Pinchas "Coverage", y ahi filtras el archivo como en el video. Es de hace tiempo, pero por si alguien más tiene la duda

  • @fernandocarrasco1108
    @fernandocarrasco1108 10 месяцев назад

    La pagina utiliza tailwind? O tailwind seria una opcion para mejorarlo?

    • @alvarobencosme5348
      @alvarobencosme5348 10 месяцев назад +3

      No usan tailwind y tienen mucho css sin usar

    • @fernandocarrasco1108
      @fernandocarrasco1108 10 месяцев назад

      @@alvarobencosme5348 entiendo gracias por la aclaración

  • @cryptominero8820
    @cryptominero8820 9 месяцев назад

    Team tailwindcss 😎

  • @microesfera100
    @microesfera100 27 дней назад

    pero 55k
    es muy poco
    es mejor optimar por otro lado

  • @evelop3625
    @evelop3625 10 месяцев назад +1

    No soy experto en css, pero por qué usar tailwind y no clases css, si quiero darle un estilo a un botón puedo crear una clase con todo los estilos necesarios? y si lo hago con tailwind debo poner todas las clases en cada botón de forma independiente?

    • @Zokram_Crossam
      @Zokram_Crossam 10 месяцев назад +5

      De primeras si. Pero puedes usar algo que se llama "@layer base" para crear estilos globales para elementos como button, h1, img, etc ....

    • @fjolsvidur
      @fjolsvidur 10 месяцев назад +1

      El tema de tailwind es la rapidez, muchas veces nos sorprendemos a nosotros mismos escribiendo estilos inline (aunque sea mala practica) para prototipar algo de forma rapida. Tailwind convierte esa mala practica en algo decente y aunque tiene puntos en contra se pueden solucionar

    • @jo3l
      @jo3l 9 месяцев назад

      @@Zokram_Crossam vamos que de serie es exactamente como usar estilos inline style="display:flex" es igual a class="flex" y de simpre estilar inline ha sido mala practica, pero ahora por lo visto no...

  • @daweedcochoddg8072
    @daweedcochoddg8072 10 месяцев назад +5

    Miren en programación, si funciona dejenlo así... El mayor consejo que puedo darles

    • @alexjmpb
      @alexjmpb 10 месяцев назад +15

      y luego se hace un refactor de 3 meses que atrasa otros proyectos

    • @gamuro6977
      @gamuro6977 10 месяцев назад +3

      Se trata de optimizar el código

    • @Fran-wk1wj
      @Fran-wk1wj 9 месяцев назад +7

      mi amigo el que reutiliza su propio código en problemas diferentes y deja lo que esta de mas aunque funcione xd

    • @legalmentejohann7875
      @legalmentejohann7875 9 месяцев назад +2

      @@Fran-wk1wj le pagan a el y le dan trabajo a otro, mira el lado positivo

    • @TheDarknight7000
      @TheDarknight7000 9 месяцев назад

      No seas mediocre

  • @jo3l
    @jo3l 9 месяцев назад +1

    Tailwind son los ruedines de la bici para los que no son frontends, de primeras es exactamente como usar estilos inline style="display:flex" es igual a class="flex" y de simpre estilar inline ha sido mala practica, pero ahora por lo visto no...

  • @Juan-ep7vp
    @Juan-ep7vp 10 месяцев назад

    y sass?

  • @3H5N
    @3H5N 10 месяцев назад

    No entiendo muy bien esto. Quiero decir, si tu importas Tailwind en un HTML, el navegador esta cargando todo el CSS. Lo que puede reducir la carga como han dicho sería utilizar postcss con algun plugin de eliminación de css que no usa o algo así, pero vaya, corregidme si me equivoco.

    • @kozmicluis2552
      @kozmicluis2552 10 месяцев назад

      Esa forma de usar tailwind es para probarlo, al igual que puedes probar react poniendo el react y reactdom directo en un script-src en el html. Necesitas un build-system como vite para que se encargue de todo el proceso.

    • @midulive
      @midulive  10 месяцев назад +8

      Es que Tailwind usa PostCSS por debajo. Detecta qué clases usas en tu HTML y sólo carga las que carga el usuario. Esto hace que cargues sólo el CSS que necesitas.

    • @3H5N
      @3H5N 10 месяцев назад

      @@midulive Aaaah, eso tiene sentido jaja

    • @leolr111
      @leolr111 9 месяцев назад

      ​@@midulive y si tengo varias páginas que talvez utilicen diferentes clases css? Es posible cargar un diferente archivo css por página de forma automática con tailwind?

    • @diegobejardelaguila8614
      @diegobejardelaguila8614 8 месяцев назад

      ​@@leolr111eso se llama carga lazy y sirve para cargar solo la página que el usuario está viendo y no toda la aplicación

  • @unusuarioth265
    @unusuarioth265 9 месяцев назад +4

    a mi no me gusta, te deja htmls inmensos, con clases toda horrendas que luego no se como encontrarlas cuando tengo que buscar algo,

    • @cerealez
      @cerealez 9 месяцев назад

      Lo que pasa es que tailwind usa la metodología de css llamada atomic css, lo cual son clases utilitarias. Tailwind está pensado para ser usados en compañía de otros frameworks basados en el estándar de "componente", lo cual es dejar todo en una sección de código y usarlos en la aplicación con un nombre más corto. En este caso no te quemas por pensar tanto el nombre de las clases, puesto que el "nombre" de todo es el mismo componente

    • @Lorenzo-vh5gx
      @Lorenzo-vh5gx 11 дней назад

      @@cerealez mi debilidad a veces encontrar el nombre adecuado para una clase

  • @porquedeberiastenerungato_
    @porquedeberiastenerungato_ 10 месяцев назад

    TailwindCSS para haters xd

  • @JorgeMartinez-xb2ks
    @JorgeMartinez-xb2ks 9 месяцев назад

    Buenísimo

  • @Dasmashina
    @Dasmashina 7 месяцев назад +3

    I hate Tailwind...

  • @mgbertiaux
    @mgbertiaux 10 месяцев назад +1

    Yo creo que estas ideas están MUY a contramano de la actualidad. En 2005, me hubiera encantado optimizar el CSS lo más posible, según la vista que se presentaba y sus recursos. El 3G que andaba cuando quería, las conexiones de 3Mb a 10Mb por el viejo ADSL a traves del cablado del teléfono y tantas cosas que hubieran hecho una diferencia no imaginable en aquella época.
    Hoy, cuando menos me venden 100Mb y casi todos andan con 150, 300,500 Mb, si es que encima son simétricos y con la fibra hasta la ficha de tu PC (Y eso que habla de un país tercer mundista como Argentina, no me quiero imaginar por el resto del 1º mundo).
    ¿De qué me sirve que mi site pese 300kb en vez de 1,5 Mb, si tengo 4G cuando menos, que tiene una latencia inferior a la del ADSL de 2010, y con casi 150Mb de ancho?.
    Prefiero meterle un loader-spinner, que espere 1 segundo extra y cargar 'casi todo'. Luego, en un SPA recargo un marco central.
    'Casi todo', es todos los recursos que necesitará un usuario promedio (que de hecho, luego con statics se puede afilar mejor). Si luego, necesito recursos extra como cargar un CSS externo y librerías externas tal como Leaflet, lo hará inyectar después.
    Hay varias cosas como tables, dropdowns, list, button, switch, etc. que por más que no esté en el primer "form", como por ejemplo un 'switch', de nada me sirve no enviarle los 80kb del switch para ahorrarme diezmil milésimas de segundo.

    • @midulive
      @midulive  10 месяцев назад +12

      Pienso todo lo contrario. Hoy tenemos mejores herramientas para cuidar la experiencia de usuario.
      Se trata de evitar hacer y enviar cosas innecesarias. Así de sencillo.
      Hacerlo porque piensas que “ya tendrá buena conexión” el usuario, además de no ser verdad siempre, es simplemente una cuestión de dejadez y falta de ingeniería de software.

    • @mgbertiaux
      @mgbertiaux 10 месяцев назад

      @@midulive
      Coincido que hoy, las herramientas están. Lo que justamente digo, es que;
      - llegaron 'tarde' y han perdido el sentido.
      El usuario no puede percibir si su celular carga 1,5MB o 300KB.
      El recurso de ancho de banda, hoy, hasta en países de latino américa el HSDPA+/3.5G, 4G o 5G, son un overkill para incluso webs del año 2010 que están ahí porque el hosting está pago hasta 2035, pero no tiene un byte de actualización.
      ¿Por qué habríamos de forzar cosas como cuidar el CSS de forma extrema?.
      No digo; "no cuidar cargar 99% de clases que no serán usadas JAMÁS".
      Como dije al principio, son cosa que no afectan a la experiencia del usuario porque el hardware así como la infraestructura, aún en países de LATAM, están 'overkill' sobre lo requisitos deseables.
      Entiendo que el CSS si esté optimizado en su diseño. Que no haya esas herencia sobre herencias con overwrite de propiedades a montones (en eso Tailwind me parece que lo hace más que excelente).
      Al procesador resolver ese mal diseño de herencia y dependiendo si es un equipo gama-entrada puede que sí lo vea el usuario y golpee su experiencia.
      Pero ¿el tamaño?.
      El recorte del CSS por tema de tamaño, me parece más como jugar a los "13KB game challenge" que a diseñar un juego.
      Entiendo, que hay cosas maravillosas en esos awards. Al verlas se te salen los ojos si uno ve los challenge de los años pasados pero para la práctica ninguno terminó siendo un juego de cara al público real.
      Recortar el tamaño del CSS que recibe el usuario par mezquinar 1MB ó inclusive hasta 2 MB, no le veo el sentido.
      El usuario no lo verá, no lo notará y ni siquiera sabrá que tuvo una carga tal.
      Entiendo que si por cada vista tuviera que cargar 1,5MB por más que no lo 'perciba' me parece un despropósito si fuera EL MISMO CÓDIGO.
      Pero sigo sin ver la ventaja de si cargo un CSS de 1MB en vez de uno uno de 300kb para luego ir cargando el resto en parte.
      Si ese 1MB me queda cacheado. Hasta hago que mis siguientes vistas ni se molesten en traerme el CSS.

    • @code1866
      @code1866 10 месяцев назад +2

      ​@@mgbertiaux vivo en España en zona rural y cada Mega que me puedo ahorrar es notable para mi conexión. No todo el mundo tiene buena conexión.

    • @mgbertiaux
      @mgbertiaux 10 месяцев назад

      @@code1866 ¿Y se nota?. Mirá que en Argentina, en el Norte, donde muchas veces se toman las fotos que se ven de las zonas muy muy muy pobres, yo he estado hace 5 años y la conexión es fluida. Hay lugares muy particulares en medio de la 'nada' en la montaña que directamente pasas de tener 3.5G/HSDPA+ a no tener ni señal de teléfono. Aún así, en los largos tramos de ruta, la señal no es la mejor pero la conexión hasta permite escuchar radios online. En general, la señal o está o no está, cuando no está es obvio que no carga nada, pero cuando hay señal, una página web que pese 2Mb carga casi al momento. Más aún, si es una web qua ya está cacheada.

  • @BillRocha
    @BillRocha 10 месяцев назад +2

    ¡TAILWIND no es profesional!

    • @midulive
      @midulive  10 месяцев назад +13

      OpenAI usa Tailwind. Ah, no deben ser profesionales esta gente.

    • @BillRocha
      @BillRocha 10 месяцев назад

      Nada cambia con respecto a mi declaración.

    • @jeffwoodyart3255
      @jeffwoodyart3255 10 месяцев назад +3

      esto no se puede discutir, el tiempo te responderá

    • @BillRocha
      @BillRocha 10 месяцев назад

      @@jeffwoodyart3255 La palabra clave: tiempo.

    • @lsolano2707
      @lsolano2707 10 месяцев назад +13

      Creo que decir que tailwind no es profesional deja muy en duda tu profesionalismo, es como decir que una persona que se moviliza en carro es menos profesional que una que camina 3 horas diarias para llegar a su trabajo