Una versión de Tailwind, ha salido la versión 3 de Tailwind, ¿vale?
Estaba la 2, muy bien, ahora ha salido la 3.
Una nueva mayor que además viene con un montón de novedades
y especialmente viene con dos cosas que a mí particularmente me llaman mucho la atención.
Uno, una utilidad que le llaman Playground,
que en realidad es un JavaScript que puedes conectar en cualquier página
y jugar con Tailwind súper fácil,
que lo vamos a intentar en Codilink, a ver si funciona.
Y lo segundo, el hecho de que ahora el Just-In-Time,
el tipo de compilación que hace para evitar enviar todo el Tailwind
y solo el Tailwind y la parte de CSS que necesitas,
lo cual hace que sea bastante más óptimo,
ahora es por defecto, o sea, esa es la versión buena.
¿Qué significa esto?
Pues que han añadido un montón de cosas a Tailwind
porque ahora no es tan preocupante,
porque ya no hace que el bundle sea más grande y todo esto.
Y por eso vamos a ver que muchas cosas son cosas que han añadido,
como los colores, nuevos colores de sombras y tal.
Y además una forma muy curiosa de poder hacer CSS Custom,
que también lo vamos a probar, ¿vale?
¡Crisus!
¡Ay!
Gracias por renovar la suscripción.
Si no paso por aquí ni me entero este año que sacaron Tailwind 3,
claro, es que tienes que pasarte, tienes que pasarte.
Pero no veas el código de AppNGS, que ahí no hay buenas prácticas.
Sí, el código de AppNGS es seguramente de los peores códigos que he hecho.
Así que, vale.
Tailwind.
Pues vamos al blog, le echamos un vistazo
y probamos rápidamente el Playground y jugamos con ello, ¿vale?
Vamos a ver el vídeo.
Me encanta el vídeo este porque es un vídeo a lo Apple.
No sé si habéis visto, pero es un vídeo a lo Apple.
Yo no sé Tailwind.
Igual se va a entender.
Sí, Fabros, no te preocupes,
porque te va a servir también de introducción.
Y con lo del CSS, lo del Playground,
que es con lo que vamos a empezar,
lo voy a explicar un poco qué es Tailwind.
Tailwind está, está...
Ya os sabéis que Tailwind lo aprendí aquí en directo con todos ustedes.
El proyecto de AppNGS me lancé y lo hice con Tailwind.
Tailwind, si tiene una cosa, es que está tirado.
Está tirado, ¿vale?
Te puede gustar poco, mucho, menos, más,
pero está tirado, ¿vale?
Así que no os preocupéis.
¿Sigue siendo limitante en comparación con CSS Puro?
Vamos a ver que no tanto.
Ahora, la nueva versión tiene unas cositas
que ha mejorado el tema este
y ahora os lo cuento, ahora os lo cuento.
Vamos a ver primero el vídeo de introducción.
Voy a parar.
Spotty.
Venga, Spotty.
Vamos a ver el vídeo que le han hecho muy...
A lo Apple, a ver que...
Ah, que, perdonad, que está tirado.
Aquí en España lo que quiere decir es que es muy sencillo,
que es fácil, ¿vale?
Eso es lo que quiere decir, que está tirado.
No es que esté en el suelo o en el piso,
o como le llaméis.
Venga, vamos con el vídeo de Apple.
¡Ojo!
¡Scrushed up!
¡Todos los colores fuera de la caja!
¡Shadows de colores!
¡Oh, yeah!
¡Qué estilazo!
¡También para imprimir!
Una impresora de la marca Tailwind
y haz que tus enlaces se decoren con más estilo y colorines.
Variantes, propiedades, layouts,
after ratio y muchas cosas más.
¡Oh, yeah!
Increíble, ¿eh?
Muy bien.
Pues esto es Tailwind 3.0.
Tiene muy buena pinta y colorines.
¿Habéis visto?
Y colorines.
Ya habéis visto.
El Just-in-Time básicamente es el tema este
de cómo se hace una compilación.
Bueno, aquí aparece que es otro vídeo.
Es como un motor en el que al final detecta
qué clases estás utilizando en tu proyecto
y dependiendo de las clases que estés utilizando,
el CSS que vas a cargar en tu página
es mucho más pequeño
y solo con el CSS que necesitas.
Es bastante curioso.
No tiene text shadow,
lo cual me parece increíblemente locurón que no lo tenga.
Aquí tenemos un poquito todas las novedades.
Vamos a echarle un vistazo muy por encima.
El Just-in-Time es esto.
El hecho de que tiene como un compilador
que solo vas a cargar el CSS que estás utilizando.
Más colores, una paleta de colores más grande.
Box shadow de colores.
Sinceramente, este me encanta.
Me gusta mucho.
Me gusta bastante.
Bastante.
O sea, tengo que decir que
esto es de las cosas más bonitas que he visto.
El scroll snap API, muy chulo, muy chulo.
Le han puesto la posibilidad de poder hacer
un slider así nativo, súper fácil.
Simplemente pones snap x, snap center
y ya tienes aquí tu slider.
Muy bien, muy bien.
Luego multi-calumn layout.
Esto para crear columnas de texto.
Native form control styling.
Básicamente, esto que es un input de un archivo,
lo que puedes ahora es estilarlo.
Puedes poner file dos puntos
y ahí ya puedes estilarlo.
Eso lo vamos a probar ahora, así que no os preocupéis.
Un modificador para print.
¿Qué quiere decir esto?
Esto está muy interesante
y se suele utilizar muy poco.
El tema es que, por ejemplo,
si entras en la página de Midudev
y tú quieres hacer un...
Imprimir esto.
Lo vamos a imprimir.
Vamos a darle a imprimir.
Podemos ver...
Bueno, voy a hacerlo con...
Aquí, por ejemplo.
¿Vale?
Vamos a ponerlo aquí.
Y vamos a ver si carga en algún momento.
¿Vale?
Que aquí está como cargando cosas que no necesito.
O sea, yo no quiero imprimir
y que me salga el logo
o los iconos, por ejemplo.
O lo que comparte el artículo.
Esto no tiene mucho sentido.
¿Vale?
O, por ejemplo, el footer.
¿Por qué?
Hombre, porque para imprimir
normalmente quieres que aparezca más solo el artículo
y ya está.
Y lo que están añadiendo aquí con este print
es que tú puedes tener una media query.
Es una media query que ya existe en CSS.
Que le puedas decir,
vale, pues para imprimir este elemento
me lo ocultas.
O para imprimir este elemento
lo pones en blog o lo cambias el color
o lo que sea.
¿Vale?
Luego, aspect ratio.
Esto es una cosa que también existe en CSS.
Puedes hacer 16.9 y tal.
No me gusta mucho el nombre
porque han puesto aspect video.
Como si no pudiera haber vídeos cuadrados.
O sea, el aspect video es el 16.9.
Pero existen los vídeos cuadrados
o existen vídeos de todo tipo.
No sé.
Y en todo caso
tiene que haber sido aspect panoramic.
No sé.
A mí me parece que
no está muy bien elegido el nombre
en mi opinión.
En mi opinión.
Luego, fancy underline styles.
Nuevos text decorations
como podemos ver.
Luego tenemos RTL en LTR.
Esto es leer de derecha a izquierda
a izquierda a derecha.
Lo cual es bastante útil
para idiomas como el árabe.
Luego, ¿qué más?
Esto es por si lo tienes el dispositivo
o lo tienes en horizontal o vertical.
O sea, tienes aquí los modificadores
portrait o landscape.
Han puesto un montón de modificadores.
Esto es muy potente.
Propiedades arbitrarias.
O sea, esto es básicamente
es que el CSS
que no soporta
o sea, el CSS que Tailwind no tiene
tú lo puedes poner a mano.
Esto lo vamos a probar.
Pero esto es muy, muy curioso.
Imaginad que por ejemplo
Tailwind, como no lo tiene
soporta text shadow.
Pues tú podrías poner
entre corchetes
text shadow
dos puntos
y aquí lo que sea
y funcionaría.
Y eso lo va a bundelizar correctamente.
Lo va a compilar
para que sea reutilizable.
Esto es un poco diferente
a los inline styles
porque además
tienes otra ventaja
y es que con los inline styles
no puedes hacer cosas como esta.
Hover, dos puntos
y el estilo que tú quieras.
Arbitrario.
Lo vamos a probar después
pero tiene bastante buena pinta.
Y finalmente
¿qué es lo último?
Pero a mí me parece lo primero
con lo que vamos a estar jugando ahora
es el play cdn.
Que básicamente es un script
que tú cargas
y esto te permite utilizar
Tailwind directamente
en cualquier página.
Pero para jugar.
Esto no está pensado
para producción.
Por ejemplo
no lo he probado
pero lo vamos a probar ahora en directo.
El tema es
tendríamos por aquí
vamos a cargar este script.
Lo tenemos que poner aquí
lo cargamos aquí
se supone
que yo si ahora
tengo class aquí
ya debería poder utilizar
Tailwind.
Vamos a probarlo.
Vamos a poner aquí
esto es Tailwind.
De hecho
ya se ve
mira
ya se ve
el estilo del
fíjate
si quito esto
o sea ya le está poniendo
el reset
solo con esto
pero ahora ya
deberíamos poder ser capaces
de poner
color
índigo
bueno no es text o color
no me acuerdo
siempre
como se nota
que no tengo aquí el autocomplete
bueno vamos a probarlo
o vamos a poner font
semi bold
o bold
que este seguro
que debería
ves
pues ya está
ya podéis utilizar aquí
Tailwind
es text
¿verdad?
text color
no text
índigo
800
vale
pues ya lo tenéis aquí
luego pondríamos
grid
place
content
center
height
h
full
creo
o screen
creo que era así
y mira
ya tenemos esto
aquí centrado
para el que no sepa
básicamente
que es Tailwind
Tailwind
lo que es
es un framework
bueno
no lo podéis llamar
de muchos
no sé como lo llaman ellos
yo diría que es como un framework
no dicen lo que es
ah
utility css framework
vale
es un framework
que está basado en
clases que son pequeñas utilidades
por ejemplo
esto sería una clase
que al añadirlo
pues te pone
bold en la fuente
luego tendrías el de text índigo
que sería para el color
luego tendrías esto grid
que haría un display grid
obviamente hay algunas utility clases
que son un poco especiales
¿no?
por ejemplo
de text 4xl
esto sería para hacerlo más grande
esto de hecho lo voy a poner
a ver si tenemos aquí algún layout
que podamos
mira
vamos a quitar el css
vamos a quitar esto también
ay que lástima que esto no se pueda mover todo
estaría bien poder moverlo todo
vamos a poner esto aquí
esto aquí
y esto aquí
vale
pues así lo veremos un poquito mejor
pues eso es lo que sería Tailwind
básicamente es ponerte a poner ahí
un montón de clases
para estilar
de las cosas
vamos a probar algunas de las cosas nuevas
que hemos visto
por ejemplo
hemos visto esto del
del css
el box shadow
y todo esto
vamos a ver
el box shadow
¿vale?
el box shadow
normalmente
para que nos hagamos una idea
vamos a poner
aquí
vamos a quitar esto
vamos a dejarlo esto en grid
con el place content
esto lo vamos a dejar así
¿vale?
vamos a dejar que esto sea un section
¿vale?
y en lugar de este Tailwind
voy a poner un botón
¿vale?
vamos a poner un button
button
y vamos a poner
botón con
sombra
hasta ahora
lo que tenía
justamente Tailwind
en el tema de las sombras
es que tú podías poner
shadow
LG
¿vale?
bueno voy a darle primero
un poquito de estilo
a esto
por ejemplo
VG
Indigo
otra vez
400
por decir algo
padding
x4
pi2
¿cómo era esto?
radius
no
rounded
es que de memoria es difícil
¿eh?
y text white
¿vale?
bueno
pues ahí tenemos un botoncito
¿vale?
perfecto
ahora para hacer que tenga hover
que ahora mismo no lo tiene
ponemos hover
y le vamos a poner
que sea VG
Indigo
200
¿vale?
entonces
bueno
más que 200
vamos a hacer que sea más oscurito
¿vale?
600
en lugar de Indigo
vamos a ponerlo blue
a ver qué tal el blue
vale
mejor
un poquito mejor el blue
y luego
para que tenga la transición
pues pondríamos
transition
transition
o transitions
ah no me acuerdo
o transitions colors
es que sin autocomplete
es un poco complicado
ah mira ya está
transition colors
¿vale?
y le podemos poner duración
y lo que sea
bueno
le vamos a dejar esta por defecto
lo importante es que ya está
¿vale?
con todas estas clases
a ver que
entiendo
entiendo la crítica
que tiene la gente
de decir
hostia
es que
¿cuántas clases?
¿cuánta historia?
bueno
está bien
pero el tema
el tema es que con solo estas clases
pues fíjate el botón que hemos hecho
lo bueno que si utilizas React
al final esto lo puedes sacar un componente
y ya está
lo reutilizas
y punto pelota
pero ya hemos hecho nuestro botón
ahora
lo que tenía Tailwind hasta ahora
era el shadow LG
por ejemplo
¿no?
y fíjate que tenemos esa sombrita
de hecho debería tener más
¿no?
XL sería un poquito más
¿veis esa sombrita que tiene por ahí?
no sé si tiene más sombra más grande
3XL por ejemplo
no
2XL
no
creo que ese
XL es como el máximo
de las sombras
bueno pues ya estaría
el tema
si sigues colocando clases
necesitas a otra pantalla
sí
ese
y yo creo que es
es lícita esa queja
de Tailwind
pero es que es parte de la gracia de Tailwind
o sea lo bueno y lo malo de Tailwind
es esto
para bien y para mal
o sea
y hay que abrazarlo
o quejarse
y ya está
es lo que hay
eso es lo que hay
lo bueno es
lo que digo
si utilizas React
esto lo puedes intentar
como
separar bastante
eso estaba bastante bien
vale
el tema
lo que es nuevo
le hemos puesto el botón
con este Shadow
pero fíjate que el Shadow
es un poquito gris
ahora en la versión 3
por suerte
lo que han puesto es que
ahora puedes hacer Shadow
Indigo
y ponerle
pues la que quieras
400 ¿ves?
ahora fíjate que
es verdad que la sombra
ahora queda un poco bruta
¿vale?
de hecho yo le podría poner
una menos
200
estaría mejor
pero si te fijas
todavía
no se integra del todo muy bien
pues ahora lo que puedes hacer
lo que puedes hacer
es ponerle
un barra
y ponerle
un tanto por ciento de opacidad
por ejemplo
40
entonces fíjate que ahora
se nota
se nota ahí la diferencia
de hecho
vamos a hacerlo
vamos a ponerlo y quitarlo
un poco para que veas la diferencia
esto sería sin el barra
y esto sería con
el tanto por ciento de opacidad
¿vale?
con tal cual
o con la barra
¿vale?
entonces como que se integra
un poco mejor
normalmente yo creo que
aunque sea
un poco
un poco de tanto por ciento
podría estar bien
y la verdad es que queda
bastante bonito
queda bastante bonito
mira para que veamos
un poco esto
vamos a hacer algo
vamos a poner tres botones
y entonces
vamos a tener blue
vamos a tener aquí orange
a ver si sale orange
y vamos a poner aquí
vamos a poner red
¿vale?
vamos a poner que esto es
display grid cap
y 10
¿vale?
los separamos un poco
y
aquí que habíamos puesto
shadow
y aquí habíamos puesto
shadow índigo
en lugar de índigo
vamos a ponerle
que sean
blue
orange
y
la sombra esta
hemos dicho que es
red
pues la verdad es que
está bastante chulo
está bastante chulo
no sé cómo lo veis
pero
a mí me gusta
me gusta bastante
apenas si se nota
pero es que
creo que esa es la grocia
¿eh?
midu poco a poco
se va enamorando de tailwind
la verdad es que me gusta
tailwind
desde que lo probé
me gustó
o sea
nunca deja que no me gustara
el problema
le veo problemillas
pero bueno
no me desagrada
además
otra cosa que tiene interesante
otra cosa que es interesante
es que podemos ponerle aquí el hover
y también cambiar
el shadow red
pues que a lo mejor
tenga como más
¿no?
o sea lo podemos poner así
entonces ya podemos ver
que también cambia la sombra
de hecho el transition este
deberíamos ponerlo a todo
para que también haga el transition de
¿ves?
así hace el transition también de la sombra
y bueno
la verdad es que queda
le falta un transition
bueno si le quitamos esto
la verdad es que ya estaría ¿no?
creo que es transition
y con transition ya estaría
pero bueno
queda bastante bien
para que veáis un poco la diferencia
si le quitáramos esto
como que queda peor integrado
es que las sombras grises
las sombras grises
para botones de colores
quedan un poco pegote
y me parece muy bonito
me parece que está
súper súper súper bien
súper bien
no hay como un marco
¿un marco de qué?
no hay como un marco
a la izquierda del botón
no sé
¿a qué te refieres?
¿de que hay un marco
de borde?
la verdad es que no veo el borde
creo que el borde
se lo quitan
justamente ¿no?
bueno yo no le veo nada
pues esto sería
una de las novedades
de Tailwind 3.0
¿vale?
el tema de las sombras
bueno aquí estaría un poco
el tema
me gusta mucho
el barra
esto está muy bien pensado
el ponerle la barra
y tener el tema de la opacidad
esto está muy bien
las cosas como son
así que genial
debe ser la compresión
del string
claro puede ser
bueno aquí tenemos también esto
vamos a hacer
si os parece
vamos a hacer otro Kodi Link
ahora que hemos hecho este
Midu ¿para cuándo un video stream
que tengo en mi Mac?
pues me parece muy buena idea
así que algún día
lo haremos
sí sí
me parece
¿cómo haces Zoom?
Julio Burgos
si yo te contase
me lo han preguntado
unas cuantas veces
unas cuantas
pero
luego te lo digo
luego te lo explico
vale
ah vale
es que lo están haciendo así
con div
bueno
div
vamos a hacer una cosa
a ver si
tenemos aquí div
3
por ejemplo
vale
vamos a poner
unsplash
no unsplash no
bueno sí
vamos a probar
el Aspen Ratio
también
si os parece
vale
unsplash
panda
vale
vamos a probar
a ver
mira
tú
a ver
esto un panda no es
esto es un koala
joder
esto es un koala
y
Dios mío
cómo me representa
este oso panda
Dios mío
cómo me representa
en la vida
me representa muy fuerte
vale
vamos a poner esto
por aquí
vamos a poner esto
por aquí
qué bonito
Skodilink
qué bonito
Skodilink
las cosas
cómo son
vamos a poner
este
entonces
el primero
sería
el Aspect Ratio
se supone que
puedes poner
Aspect
Video
uy pero
me lo ha
me lo ha tachatado
¿no?
ah claro
porque
Object
Cover
hostia
ahora no me acuerdo
Object
Cover
puede ser
ahora
sí
y vamos a poner
que el
div este
tenga
como máximo
un
height
creo que de
30
ah no
pues esto
pensaba que esto
seguiría así
pero no
ah vale
porque esto es
vale vale
vamos a ponerle mejor
el tamaño
vamos a poner
dos
cuartos
dos quintos
vale
le vamos a poner
que esto es un
rounded
vamos a poner
workflow
hidden
vale
y aquí
vamos a ponerle
padding 4
vale
va pillando forma
el slider
va pillando forma
un poquito
vamos a ponerlo así
no sé si poner
que esto esté centrado
bueno da igual
por ahora
esto ya estaría
vamos a poner también
el shadow
el eje
vale
perfecto
con esto ya tendríamos
uno
vamos a poner
unas cuantas veces
esto
vale
lo primero que entiendo
que tendríamos que hacer
porque esto no puede ser así
tenemos que ser flex
y gap 4
vale
lo que pasa
es que este flex
claro
si lo ponemos con flex
veo que me lo ha
me lo ha puesto
cada uno de
de lo mismo
¿no?
ah
¿cómo puedo evitar
que me haga esto?
¿sabes?
no quiero que me los
si
quiero que me
respete
el ancho
que le he puesto
no sé si entonces
se lo tendríamos que poner
de otra forma
¿ves?
yo le voy poniendo
y me los está ajustando
¡no!
me tienes que
respetar
lo que he puesto
a ver
nos podemos intentar
copiar de aquí
para ver qué es lo que
han puesto aquí
del flex
vamos a verlo
si la demo está
snap center
ring
vale
ring
vale
la han puesto
ring 0
ring 0
ring 0
eso es lo que han hecho
y al final
también tiene flex
y bla bla bla
vale
entonces lo que hacemos
con esto
vamos a poner que esto es
with full
y a todos estos
vamos a ponerle que
tiene que hacer
un flex
ring 0
vale
ring 0
pues no
ay
que he puesto
es ring 0
ahora
vale
esto ya va pintando mejor
ya podéis ver
¿ves?
yo puedo scrollear
de izquierda a derecha
podría incluso hacer
de hecho
si lo hacemos aquí
lo podríamos ver
aquí en la preview
vamos a verlo
lo puedo poner así
Moto G4
bueno
es un poco raro
así como queda
vamos a hacerlo esto
a ver
si lo hacemos más grande
por ejemplo
4 o 5
vamos a hacerlo más grande
para que quede un poco más bestia
vale
el slider
vale
y así
¿ves?
ya tendríamos como un slider
que parece medio nativo
pero bueno
que todavía
lo que le faltaría
es el poder
deslizar
y que se quedase en medio
ahora esto está muy bien
pero esto se queda
un poco regular
vamos a poner otra imagen
de panda
vale
para que tengamos más
hostia
panda cabreado
eh
panda cabreado
muy bien
me gusta el panda cabreado
vamos a ponérselo por aquí
panda cabreado
panda enfadado
vamos a poner otro
vamos a buscar pandas
que bonitos
por favor
son los pandas
dios mío
todos los pandas
están hechos
para que los ames
hostia
esto es comida de perro
un panda con comida de perro
pobre panda
venga
vamos a poner este por aquí
vale
y vale
ya tendríamos esto por aquí
pam pam
ahora
la idea de todo esto
las pandas rojos también
es la hostia
si eh
que potente
es codilink
es brutal
es brutal
es creíble
es la hostia
y la hostia
vamos a poner al
a otro va
esto no es un panda
esto se ha puesto la cabeza
a una persona
nos está engañando
bueno
da igual
el tema
con todo esto que tenemos
vale
que está muy bien
que esto se puede
como que puedes escrolear
pero no hace un slider
se supone
que simplemente
añadiendo
dos clases
vamos a hacer que esto sea un slider
vamos a ver si lo conseguimos
se supone que
tenemos que hacer
que este section
que será el contenedor del slider
esto le vamos a decir que es
snap x
vale
snap x
ahora si lo pruebo
esto todavía no habrá hecho
nada
entiendo que
ves
esto no hace absolutamente nada
no ha habido ningún cambio
pero
si ahora
a cada elemento
le decimos que tiene que ser
snap center
y esto
lo vamos a poner
a todos los elementos
vale
también a este
esto aquí
esto aquí
esto aquí
vale
snap center
ahora cuando yo haga scroll
pues
ha pasado de mí
totalmente
ha pasado de mí
no lo hace
no lo hace
algo hecho mal
que he hecho mal
que he hecho mal
a ver
snap x
snap center
pues no
no nos ha funcionado
la demo
porque no nos ha funcionado
la demo
que hemos hecho mal
snap x
este lo he puesto aquí
y snap center
este lo he puesto aquí
pues deberíamos haber visto
como esto
se queda
puede ser que nos falte
el tema de
hola moisés
bienvenido
bienvenido
puede ser que nos falte
el tema también
del overflow
que se quede
y todo esto
no el flex
lo tenemos
el flex
lo he puesto por aquí
flex
ves
puede ser que sea
overflow x auto
pero bueno
esto lo
así
sí sí
sí sí
pues es esto
el overflow x auto
pensaba que
claro como lo tendría
pero sí sí es esto
el flow x auto
importante
importante
pero veis
veis que yo intento pasar
y como no está todavía en medio
pues no se pone
ahora si voy a la siguiente
y la dejo así
como ha pasado más
la va a centrar
y madre mía
si es que tenemos así
mira qué bonito
bueno esta porque está al final ya
pero mira
se queda en medio
esta no porque es la primera
pero esta
si la dejo así
se queda en medio
y con esto tenemos
pues un scroll
o sea un slider
bastante nativo
que os parece
y lo hemos hecho en un momento
hemos hecho
joder
midu fail
madre mía
epic fail
joder
la lichi
no hay
no hay
no se puede
no se puede así
eh
dios mío
si está genial
si no hemos tardado casi nada
nos hemos dado cuenta
súper rápido
madre mía
madre mía
eh
además lo hemos hecho
nada
en un plis
hemos hecho
que quede bonito
ahí con sus colores
de hecho
le podríamos poner
que la sombra
este shadow
sea green
300
ya que todos son
rollo así
o incluso más
¿no?
700
con 50%
podríamos hacer algo así
y ya quedaría todavía
más integrado
con los pandas
esto por aquí
y esto por aquí
ya está
y ya está
ya lo tendríamos
pero ves que
si tú lo intentas dejar
en un sitio
que no coincide
¿no?
esto es bastante como nativo
como serían los móviles
está muy bien
pero parece que la curva
de aprendizaje es dura
tú porque eres muy bueno
hombre
pero ese overflow x auto
es el que te tiene una hora
dando de vuelta al tema
porque no va
hombre a ver
pero es que
esto es de css
esto lo sabía
no por tailwind
esto lo sabía
por css
claro al final
tened en cuenta
que
tailwind al final
por debajo
utiliza css
entonces
este overflow x auto
esto es porque
cuando tú quieres
que esto funcione
como un slider
horizontal
claro
necesitas decirle
el overflow x auto
como para saber
que tiene que salir
el scroll
y al final hacerlo
pero esto no
no es una cosa de tailwind
esto es una cosa
de cómo funciona
el scroll snap
en css
la cuestión de aprendizaje
es un poco
el nombre de las clases
si
que valores trae
el overflow x auto
pues básicamente
esto
overflow x auto
esto es
esto es lo que trae
seguro
tal cual
eso es
mejor sigo
con mi chakra UI
bueno va por gustos
al final chakra UI
es super potente
también en hecho
que son componentes
pero
claro
bueno
el tema es que
de tailwind
también se podrían hacer
un montón de componentes
de react
te da un poco más
libertad
a lo mejor
son como cosas distintas
pero chakra
está super chulo
también
no creo que haya
ningún problema
con chakra
mira
multicolumn layout
vale
esto lo podemos hacer
también en otro
este es más fácil
este yo creo que es
más fácil
de que lo veamos
funcionar
vamos a poner
codilink
vamos a poner
esto por aquí
esto por aquí
vamos a copiarnos
el script
la verdad es que
me gusta mucho
el script
porque la facilidad
que tienes
a la hora de
jugar de este tipo
de cosas
hay
hostia
no hay un lorem
no hay lorem
a ver
lorem emet
pensaba que había
un lorem ipsum
de emet
o se es ipsum
ah pues
pensaba que
no sé si es que
no lo tiene
este
ves
parece como que
no lo tiene
p por 4
lorem
ah si si
es que hay que ponerlo entero
pensaba que poniendo lorem
ah si
pues si que lo tiene
vale vale
no sé por qué antes
tenemos salir
bueno pues serían
estos 4
esto lo deberíamos poner
por ejemplo
en un article
ponemos esto
en un article
entiendo que aquí
ya sea class
igual
column 2
vale
me ha dejado fatal
no es column 2
como es esto
columns
columns
columns
columns
pues mira
ya está
así de fácil
así de fácil
la verdad es que
esto es lo que está
bastante bien
de tailwind
que de forma
súper fácil
sin necesidad
de saber exactamente
cómo
cómo hacerlo
pues mira
ya lo tienes ahí
otra cosa que tienes
es que
esto está bien
porque
además de tener
el número de columnas
también tienes
como unos valores
por defecto
interesantes
por ejemplo
tienes creo
sm
no sm
no
x
xl
no xs
no sm
xs
vale
entonces esto
lo que tiene
es que si te fijas
tú pones columns
xs
esto me lo ha dividido
en dos
pero si lo abrimos
en grande
cuando tiene suficiente espacio
lo hace en cuatro
entonces se va como ajustando
esto está bastante
curioso
ves al final lo ponen
una
dos
tres
esto está muy chulo
esto está muy bien
el tener estos por defectos
que al final hace que no te tengas
que preocupar tanto
ves aquí lo están haciendo
como con media query
pero también tienes la posibilidad
de hacer lo que
lo que he hecho
mira
esto también está
tiene bastante buena pinta
vamos a
a chequearlo
este
vamos a quitar esto
papá
esto es lo nuevo
que han sacado
básicamente
lo voy a explicar así
y esto me lo voy a copiar
vamos a quitar esto
vale
y así pues lo vemos
a partir de aquí
y ya está
venga
el tema
que pasaba con tailwind
hasta ahora
que era un poco rollo
pues que tú
al editar esto
vale
tú imagínate este botón
que dices
vale lo quiero editar
venga
pues voy a hacer
un background
violet
800
y no
fail
pum
no
esto es un rollo
¿por qué?
porque no lo estaba estilando bien
o sea
está estilando como
lo está estilando mal
básicamente
entonces
claro
aquí podías intentar
hacer un millón de historias
pero
al final
no había una forma sencilla
de estilarlo
pues ahora
cuando tú tienes
un input type file
lo que puedes hacer es
vale
pues yo lo que quiero
es estilar este file
de esta forma
file dos puntos
¿ves?
y ya tienes aquí
que te lo has estilado
justamente lo que te interesa
y esto pues puedes seguir
file
y puedes decir
pues text
white
por decir algo
file dos puntos
rounded
¿vale?
para el border radius
file dos puntos
border 0
¿vale?
file dos puntos
px2
bueno
px4
y file
pi
4
también
bueno
me he pasado
dos
¿vale?
y fíjate que ya estamos estilando
el botón exactamente
file
y pues el margen de la derecha
cuatro
¿ves?
y ahora
o diez
y así
pues esto está dejando una separación
también por supuesto
con el file
y esto es una cosa que es muy interesante
de Tailwind
es el hecho de concatenar
concatenar también
clases
o sea
aquí tienes file dos puntos
tal
pero puedes hacer
file dos puntos
hover dos puntos
bg
violet
y 400
por ejemplo ¿no?
y entonces ahora cuando haga el hover
cambia también
y pues file
no sé si hay un cursor
cursor pointer
no sé si esto funciona
sí
mira
cursor pointer
esto está
la verdad es que es bastante
sí
al final escribes el libro de ptt
solo con clase
totalmente ¿eh?
y david
bp
esto hay que aceptarlo
o sea
esto no se puede defender
porque es la gracia de Tailwind
o sea
yo
hay gente que me dice
bueno puedes utilizar el apply
es verdad
pero si utilizas el apply
y quitas esto
de tus archivos
al final lo que realmente
estás haciendo
es
tienes algunas mejoras
de Tailwind
sí
pero al final tienes que decidir
tú el nombre de la clase
que en realidad
el Tailwind
uno de sus grandes
grandes bazas
es justamente que no
no tienes que poner
nombre de clases
yo creo que la gracia está
muchas veces en utilizar esto
en alguna biblioteca de UI
como puede ser React
¿por qué?
porque tú al final
que esto lo puedas tener
separado totalmente
¿sabes?
o sea que tú puedas crear
un componente
solo de esto
entonces ya te da más igual
que esto
lo concatenes aquí
de hecho lo puedes separar
en diferentes strings
separarlo bien
bonito y tal
y ya te da igual
cuando es solo un componente
de React
o sea si puedes hacer aquí
por ejemplo
pongamos que haces esto
input file
y haces algo así
y por lo que sea
tienes esto así
incluso
esto lo podrías llegar
a separar
mejor
podrías tener
colores
no sé qué
no sé cuánto
una vez que tienes esto así
pues es mucho más fácil
realmente ya no te preocupa tanto
bueno esto es un ejemplo
esto
esto no ría
que por lo tanto
te sale esto mal
pero
que me parece lícita
la queja
o sea
es innegable
que tienes esto
y de hecho
va a peor
va a peor
en el sentido
de que imagínate
que este input file
cuando es
SM
quieres que sea
de otra forma
pero también te obliga
a que tus estilos
sean como
más sencillos
intentar
simplificarlos al máximo
más cuando utilizamos
atomic design
para las carpetas
lo dice
carens
lo que yo considero
como pro de tailwind
es que te ahorra
una cantidad de media queries
brutal
sí totalmente
es buena idea
combinarlo con style components
a ver
no tiene mucho sentido
a ver
combinarlo puedes combinar
si es una necesidad
pero no tiene mucho sentido
porque al final
los estilos
los tienes aquí
entonces
puedes hacer como
un style component
sabes
o sea
al final
lo que he hecho
sería como un style component
¿no?
sport cons
style
input file
y tú tener esto
y estilarlo así
esto es muy parecido
a style components
no creo que
que tenga sentido
forzarte
a utilizar los dos
en el mismo proyecto
pero al final
si tienes style component
ya y quieres
que convivan
porque quieren migrar
a tailwind
pues bueno
tiene sentido
o sea
eso sí que
pueden convivir
sin ningún problema
hola
jc soft
def
¿qué tal?
la cantidad de CSS
duplicado que te ahorras
es brutal
eso es verdad
de hecho
una cosa que me gustaría
ah por cierto
por cierto
esto está muy chulo
que no lo hemos visto
pero esto también
es muy chulo
que aquí no
veo que aquí
a lo mejor no sale
pero una cosa nueva
que tiene también tailwind
que no lo he comentado
de hecho
aquí sí que está
mira voy a quitar
todo el input
¿vale?
para que quede más limpio
todo esto
de hecho voy a quitar
todo esto
¿vale?
y vamos a poner
form
y voy a poner
input type checkbox
¿vale?
checkbox
¿vale?
hola
¿vale?
esto es el checkbox
voy a poner que esto
sea el grid
place content center
height full
screen
perdón
screen
y vamos a poner aquí
tip
y dip
¿vale?
porque si te fijas
los colores
que suele tener esto
¿no?
este es el que es por defecto
tendríamos también
¿qué más podríamos poner aquí?
bueno el input
no tiene mucho sentido
teníamos el submit
que bueno
el submit tampoco sale muy bien
¿cómo se llama?
el otro
el radio
joder
que no me salía el nombre
¿vale?
radio
¿vale?
tendríamos estos dos
pues una cosa nueva
que han puesto
es el accent color
o sea puedes poner
accent color
por ejemplo
índigo
bueno vamos a poner otro
ahora
violet
300
o creo que
hay que quitar el color
creo que es así
¿ves?
y ahora
lo que puedes hacer
es estilar también
los inputs del formulario
lo cual está bastante
bastante chulo
aquí cambiando el accent color
pues lo puedes estilar
súper fácil
lo malo es que creo
que no es compatible
en todo
o sea esto es una cosa
de CSS
de nuevo
esto no es una magia
de Tailwind
sino que está utilizando
básicamente algo nativo
de CSS
entonces tiene bastante
buen soporte
pero no el soporte
no está en todos
por ejemplo
en Safari
si vamos a ver esto
en Safari
seguramente veremos
que todavía no funciona
hostia
me ha salido un oso panda
aquí también
curioso ¿no?
vale
¿ves?
esto no lo está estilando
en Safari
pero no es un tema
de Tailwind
es un tema
de que el navegador
no soporta
y ya está
¿vale?
solo para que lo sepáis
que es interesante
pero no es mágico
no hace magia
vale
el Asper Ratio
este ya lo hemos probado
la verdad
fancy
bueno
el Asper Ratio
es una cosa
que es súper genial
o al menos
al menos está
súper bien
es el hecho
de tener
claro
esto antes
para hacerlo
era un rollo
ay
¿qué ha pasado?
ah claro
es que esto no es así
pensaba que era así
pero no es así
no es tan así
no es tan fácil
el Asper Ratio
este
o sea
el Embed
que hay que poner
es este
¿vale?
no
eso es una cosa
que siempre me da
un poco de rabia
de YouTube
¿sabes?
el tema
de tener que poner
el Embed
y todo esto
si ponemos
el Class
Aspect
Video
y aquí le decimos
que el Width
sea todo
¿vale?
esto por más que
lo vamos
ah mira
es que
ah me he equivocado
o sea
Asper Ratio Video
coño
coño
ah no
lo está haciendo bien
lo que pasa es que
como se cortaba
digo
¿por qué se corta?
¿qué le ha pasado?
o sea lo está haciendo bien
lo que pasa
Video no disponible
hostia
cuando le diga a preview
me dice Video no disponible
porque YouTube
detecta algo raro
y bueno
sí que funciona ¿vale?
lo que pasa es que
tarda en
ves como que tarda
ya decía yo
como se está cortando
digo hostia
que raro
pon un vídeo tuyo
¿vale?
no sé si lo hayáis visto
o he hecho un vídeo
he hecho un short
que espero que os haya gustado
de prueba temas de colores
en Visual Studio Code
sin instalarlos
bueno pues lo podéis
le podéis echar un vistazo
¿ves?
el short este por ejemplo
mira
mira
vamos a probar esto
que esto está bastante chulo
¿vale?
esto está
bastante chulo
el tema de
si yo ahora pongo este short
vamos a ver que
se ve mal
uy
perdón
compartir
¿compartir?
¿dónde está el embed?
joder
ni siquiera aquí
ni siquiera sé dónde están los embeds
la madre que me trajo
como se nota que no hago un embed a mano
en mi vida
vale
vamos a poner este
¡pam!
vale
el problema que tendríamos
con este
es probar rápido
vale
fíjate que el aspect ratio
es al revés
no es el aspect ratio
que necesito
tendría
en lugar de aspect video
debería ser al revés
entonces
creo
si no me equivoco
vamos a probarlo
creo
que podemos hacer esto
vale
así no es
aspect ratio
¿puede ser así?
tampoco
vale
pues tampoco es así
vamos a ver cómo es
vamos a ver cómo es
porque sé que se puede
hacer este tipo de cosas
lo cual me parece increíble
aspect ratio
hover aspect square
break points
customizing
no customizing no
esto
aspect
ah pues lo había puesto bien
¿no?
que se me ha escapado ahí
que se me ha escapado ahí
de lo que he hecho
ahora sí que sé que lo había
puesto mal
pero es aspect
916
vale
ahora sí
vale
obviamente
el tema está mal
porque ocupa más
tamaño de lo que debería
no sé si le podríamos
poner aquí esto
vale
pues fíjate
perfecto
ves ahora
ocupa justamente
lo perfecto
no no hay que añadirlo
a la configuración
esto es nuevo
esto es nuevo
esto es nuevo
no hay que añadirlo
a la configuración
esto es algo
arbitrario
o sea yo aquí puedo ponerle
lo que me dé la gana
3-2
vale
o 2-3
sí
no más variance
noelia
efectivamente
ahora ya puedes poner esto aquí
por ejemplo
pues el vídeo
este sí que está por defecto
y podríamos poner aquí
9-16
y ya lo tendríamos
justamente
¿cuál es la diferencia
y cuál es la ventaja
de esto
por lo que he estado leyendo?
pues que si tú tienes
en otro sitio
que utilices esto
esto es diferente
a un inline style
porque aquí
lo que hace tailwind
es que detecta
que estás utilizando
esta clase
esta clase
dos veces
y al final
lo que hace
es aplanarla
vale
esto lo que hace
es aplanarla
de forma que reutiliza
esto
esto lo que haría
para que nos hagamos
una idea
es poner aspect
haría algo así
vale
diría vale
pues entonces
vamos a poner
aspect ratio
9-16
haría esto
esto sería
la compilación
haría esto
aunque aquí salga
dos veces
pues diría
vale
pues voy a crear
una clase
que tenga justamente
esto
porque lo estás
utilizando aquí
la verdad
que esto
esto está muy bien
esto está muy bien
esto
esto sí que
porque antes
es lo que decía
alguien en el chat
¿no?
había que añadir
una variante
y tal
y es un poco rollo
y con esto
esto es muy potente
muy
muy
muy
muy potente
muy potente
me parece una idea
brutal
y mira
justo
perfecto
o sea queda
el vídeo
para lamerlo
para lamerlo
con una cara
de asesino
pero
para lamerlo
muy
muy chulo
eso me
me gusta mucho
me gusta mucho
me gustan mucho
las
las cosas
que han añadido
me gustan
me gustan
venga
voy a hacer una poll
sobre eso
migro mi blog
a Tailwind
sí
y en directo
sí
en privado
a ver
no
déjalo así
no
sin estilos
bueno
es que si
si pongo
déjalo
sin estilos
venga
venga
que os pongo
una poll
vale
ahí tenéis
cinco minutos
para participar
y no es más cómodo
pero hace más difícil
la lectura
de la estructura
efectivamente
hace más difícil
la lectura
de la escritura
las cosas como son
oye mira
aquí no están
veo que
la novedad
esta que ponía
decoration
dice
no you can change
underline colors
y tal
pero veo que no
no funcionan
aquí se ve súper bien
porque en el mío no
aquí no se ve bien
no sé si es por la versión
pero veis que aquí no se ve bien
me sorprende
decoration
índigo
underline
ah pero es que
es que
porque se ha copiado
es que aquí pone
underline
es que todos ponen underline
o sea está mal
este ejemplo está mal
porque todos ponen underline
y este no tiene pinta de ser underline
¿no?
ese tiene pinta de ser
wabi
decoration solid
no sé qué
no sé cuánto
a ver
solid double
vamos a poner wabi
a ver qué tal
es que de hecho va aparte
¿no?
sí
miralo
va aparte
o sea es underline
decoration wabi
o decoration double
¿no?
double
o double
doble
con u
con u
y doted
y dash
bueno el doble
es el más
con u
pues esto sería también
a ver qué se nos ha quedado
portrait
bueno esto
bueno ya está
el cdn
la verdad es que
no sé
es muy chulo
o sea está muy chulo
si lo migras a tailwind
vas a ensuciar todo el blog
wow
ahora ya no purga las clases
sino que ahora genera
solo lo que necesita
claro
pues eso es lo que hemos comentado
ya unas cuantas veces
el whatsapp play
que ahora solo genera
lo que necesita
de hecho por eso
que gracias a eso
también podemos hacerlo
el aspect ratio y tal
de hecho
otra cosa que hace
de hecho lo vamos a ver ahora
eso de ver lo que genera
lo podemos ver ahora
porque esto es muy fácil
de que lo veamos
lo podemos ver muy fácil
si vamos a
vamos a ver como se instala
con lo de podcss
y todo esto
es un poco rollo
porque seguramente
hay una cosa que no me gusta
porque seguramente va a petar todo
pero vamos a intentarlo
¿vale?
para que veáis
la potencia que tiene esto
realmente
tailwind demo
espero que no petes
si peta el stream
aguantad un momento
aguantad
no os vayáis
no petes
no petes
vale
tailwind demo
espero que no petes
vale
npx tailwind init
vale
npx tailwind init
vale
vale
vamos a abrir el proyecto
y vamos a ver ahora
lo del output
justamente
que es bastante churro
o sea
vm init init
vale
vale
vamos a poner esto
source input files
input.css
vamos a poner esto
esto es lo del input
vale
en el content
vamos a poner esto
esta línea
es la clave
esta línea
es la que va a mirar
dentro de estos ficheros
dentro de los ficheros
que están en source
de html
y va a extraer
el css
que necesita
para funcionar
de hecho
ejecutando esto
lo vamos a ver
y vamos a ponerlo
con el watch
así que vamos a poner aquí
el compile
tailwind
vale
vamos a poner esto
esto miraría
dentro del input css
y harían dist
el output
vale
lo que voy a hacer
es crear un index.html
y me voy a copiar
el ejemplo
que había puesto
del aspect ratio
este
por ejemplo
vale
vamos a poner este
lo pongo aquí
en mi index.html
y esto
aquí tenemos dos opciones
bueno
lo voy a dejar así
por ahora
vale
lo voy a dejar así
y lo que voy a hacer
es ejecutar
el compilado
que esto normalmente
no te preocupes
porque esto lo hace
automáticamente
casi todas las herramientas
que ya utilizamos
pero hacemos esto
y si vamos a dist
esto sería
todo el css
que se carga
claro
ahora me dirás
pero aquí hay un montón
de css
no a ver
fíjate bien
fíjate bien
porque aquí
hay de hecho
de hecho
no me ha puesto
el de aspect ratio
espérate
ah es que no he guardado
la configuración
perdón
a ver ahora
vale
vale
todo esto
todo esto
aquí
en realidad
es el css reset
adiós
me tengo que ir
hoy me graduo
de ingeniero de sistema
mucha suerte
whatsapp play
ojalá te vaya bien
super bien
mucha suerte
mucha suerte
mucha mucha suerte
alguien se ha comprado
los nuevos mapbook
tengo el de 14
y la batería me dura
media jornada laboral
pero eso es bueno o malo
o sea que sí
que emigro mi blog
a tailwind
y lo hago en directo
vale vale
pues lo haremos
no es normal
a no ser que estés
haciendo cosas muy chungas
a no ser que estés
haciendo cosas muy chungas
vale
entonces
esto que estáis viendo
aquí del output
esto
olvidaos
porque esto es el css reset
o el normalize
que tienes que cargar
sí o sí
en casi cualquier proyecto
o sea esto es normal
pero a partir de esta línea
fíjate
lo que
o sea solo está cargando
este css
hidden aspect ratio
este es el aspect
que yo he creado
y este sería
el hscreen
si miramos nuestro index html
fíjate
es que no tiene nada
o sea
esto es lo que hay
si yo empiezo a añadirle aquí cosas
por ejemplo
shadow
shadow
ah por cierto
mira
si tienes
la extensión
que te la recomiendo un montón
de visual studio
aquí tienes autocompletado
encima
por ejemplo
text white
y tal
si yo guardo
vamos a ver que en el output
empieza a añadirse más cosas
y esto pues va añadiendo
todas las clases
y todas las cosas
que vas
vas utilizando
obviamente
pero
pero
el tema es
que llegará un momento
que a lo mejor
las clases que utilices
además este output
es que esto debe ser súper chiquitito
de hecho vamos a verlo
broadly online
broadly online
si ponemos bytes to
bytes to encode
bytes to encode
hostia
nuestro es
encode
mala
pensaba que me iba a decir
cuánto es
cuánto era lo que
lo que ocupaba
con broadly
eso es lo que quería saber
pero no se puede saber
nadie ha pensado en esto
no lo puedo creer
bueno
quería ver cuánto ocupaba
pero que debo ocupar muy poco
esto
ocupa súper poco
esto es lo bueno que tiene
vale
que solo está generando
las clases que necesita
vale
esto es lo que realmente
es súper potente
además
como os he comentado antes
cuando tenéis esto
si ponéis en class
ta ta ta ta
aquí podréis poner también
por ejemplo
text shadow
¿no?
cero
cero
cero
eh
ah
ojo
ojo
esperad
esperad
esto es importante
si hacer
pero no quiero ver cuánto ocupa
vale
esto es cuánto ocupa aquí
7,5
pero esto no es lo que ocupa
realmente luego
porque lo que quería ver
es cuánto ocupaba
compilado con
que zip
o con broadly
en este caso
es lo que quería ver
entonces
el tema es
que ahora además
también aparte de este
veis este aspect
que esto lo hemos puesto
como nos ha dado nosotros la gana
de hecho aquí podéis ver lo que saldría
también puedes crear tu propio CSS en línea
o sea puedes hacer lo que te dé la gana
por ejemplo aquí
pues podríamos hacer
hacer el de text shadow
lo que pasa
con el text shadow
es que no soporta espacios
¿vale?
o sea text shadow
con cualquier cosa que pongáis aquí
arbitraria
no soporta espacios
y en lugar de espacios
hay que poner como
guión bajo
si yo guardo esto
se supone que deberíamos tener ahora
una nueva clase
¿ves?
text shadow
cero
cero
diez px
cero cero cero
que esto
obviamente habría que evitarlo
¿eh?
no os pongáis ahora como locos
haciendo
CSS arbitrarios
porque se puede
hay muchas cosas en esta vida
que se pueden hacer
por ejemplo
se puede intentar
uno
meter
pues el mando de la tele
por la nariz
se puede
pero no lo hagas
¿vale?
que se pueda
no se explica que deberías
y esto
debe ser como más
una
un escape
en el caso
de que en algún momento
por ejemplo
text shadow
no está soportado
por tailwind
tailwind no te da ningún tipo
de text shadow
si fuese
súper necesario
bueno pues haz el text shadow
y lo puedes hacer así
esto es una forma de escapar
a digamos
las
los valores por defecto
que te está dando tailwind
punto
¿es el important de tailwind?
me parece que sí
me parece que sí
se puede
pero intentad no hacerlo
básicamente
solo os quería enseñar
que cuando lo hagáis
por ejemplo
aunque esto
ahora lo utilices
80 veces
da igual que lo utilices
80 veces
porque el output
va a ser el mismo
lo cual
esto es una diferencia
importante
respecto a cómo funciona
a lo mejor
el inline css
que al final
estaría tantas veces
como lo necesitases
no aquí en el css
sino que estaría
en línea
y en html
para hacer el text shadow
para eso
y ya está
pero
sí sí
no lo hagáis
no lo hagáis
en vuestras casas
no lo hagáis
en vuestras casas
bueno dicho esto
yo en realidad
todo esto
lo que estáis viendo
pero si estás haciendo
un css
para un componente react
se mete todo
en uno global
o puedes tener
compilado por cada componente
buena pregunta
a ver
en tailwind
normalmente no tiene
mucho sentido
hacer estilos
por componente
y yo creo que se puede
se metería todo
se te metería todo global
entonces
pero es que da igual
porque es que
lo bueno que tiene tailwind
es que el css
que vas a repetir
es bastante
bastante grande
¿sabes?
normalmente vas a repetir
las utility clases
constantemente
por eso es lo que dicen
que tailwind
pues como que crece
bastante bien
porque tu css
no se hace mucho más grande
porque al final
siempre son las mismas
clases de css
midu
¿cuándo tienes pensado
terminar el libro de git?
pues mira
sinceramente
tenía pensado terminarlo
este mes
pero
no tenía pensado
que existiese
el advent yes
entonces el advent yes
me está llevando
bastante trabajo
sé que muchas veces
no se nota
pero
tiene un trabajo detrás
sobre todo el tema
de preparar
todos los días
los retos
los retos
no los tengo preparados
los preparo
día tras día
o sea que
por ejemplo
esta noche
me tengo que preparar
el de mañana
o mañana por la mañana
me prepararé
el de mañana
entonces hay bastante
trabajo por ahí
y mi idea es que
bueno
al final
quería hacer este mes
terminar el libro de git
lo voy a tener que dejar
cuando termine
porque no me da
no me da la vida
entonces
yo
¿por qué me da la vida
ahora
voy a tener que ir