Curso Práctico de Tailwind CSS | Aprende en 1 hora
Вставка
- Опубліковано 2 сер 2024
- 🚀 ¡Bienvenido al Curso Práctico de Tailwind CSS! 🚀
Descubre cómo crear paso a paso interfaces modernas utilizando Tailwind CSS. Aprende las mejores prácticas y técnicas para maximizar la eficiencia en el diseño web con este poderoso framework.
- ¿Quieres aprender más? Obtén el curso completo de TailwindCSS: aprendible.com/tailwind
- Suscríbete para más videos como este: / @aprendible
Quieres aprender más de mi? Échale un vistazo a los cursos:
Cursos: aprendible.com
Facebook: / aprendible
Twitter: / aprendible
Tabla de contenidos
00:00 Introducción al curso Fundamentos de Tailwind CSS
01:38 Qué es Tailwind CSS
04:00 Instalación de Tailwind CSS
11:31 Formateo y orden de clases automáticos
15:14 Barra de navegación móvil
19:46 Cómo utilizar íconos SVG con Tailwind CSS
26:53 Links de navegación móvil
32:31 Links de navegación escritorio
40:20 Estructura de un artículo
44:01 Trabajando con imágenes en Tailwind CSS
50:08 Cómo utilizar grids adaptables
57:19 Diseñando el pie de página
Muchas gracias
Muy cierto, no suelo verme videos asi pero algo me mantuvo enganchado de principio a fin creo que fue eso, lo sencillo de entender y tono relajado. Me ha gustado, Más así por favor.
Excelente, 1
Excelente curso, muchas gracias 😃
Buen vídeo, muy completo. Gracias!
Excelente curso, superó mis expectativas, lo recomiendo ampliamente. :)
Muy bueno! muchas gracias!
no se por que pero su voz y su manera de explicar relajada y si terminologia complicada hace que relaje viendo el video es como un podcast
Estaba pensando lo mismo.
Súper claro. Muchas gracias!
Muy buen curso, gracias 🙏
excelente video, justo lo que andaba buscando muchas gracias !
Excelente video!
Excelente tutorial. Gracias..
me gusto mucho el contenido, solo tuve problemas con mis imagenes
Videazo!!!
¡Muchas gracias por el contenido, aprenderé Laravel!
Excelente material
Gracias crack. Me fue de gran ayuda.
Sinceramente muchas gracias 😮😮😮
Que buen video, y de las mejores explicaciones! Desde ya me suscribo a tu canal!
Gracias ;D
Muy bueno
buenisimo ... manejo talwind un buen tiempo y e aprendindo muchas cosas nuevas aqui !!!
estaremos en contacto, me interesa usar el framework. gracias.
Un curso excelente. Tengo problema en encontrar el enlace de github
estoy sorpredido con la calidad de tu contenido, muchas gracia por tu tiempo
Señor disculpe. Está muy bueno el vídeo pero quedó ahí como que faltó la parte responsive del botón el about y los demás . Cuando podría hacer el vídeo finalizando todo?
Hola Gracias por el video.
El CDN se puede utilizar en React y Next Js?
tenes que instalar su dependencia nada mas
Para los que nos les sirva el plugin aqui soluciones en mi caso con next js (tsx)
Crear un archivo en la carpeta base llamado prettier.config.js y pega lo siguiente:
// Se exporta un objeto de configuración para Prettier
module.exports = {
// Se especifica el uso de un plugin de Prettier para Tailwind CSS
plugins: ["prettier-plugin-tailwindcss"],
// Se especifica la ubicación del archivo de configuración de Tailwind CSS
tailwindConfig: "./tailwind.config.ts",
};
Si aun no funcion en tu package.json despues de tu dependencies o devDependencies
"prettier": {
"plugins": [
"prettier-plugin-tailwindcss"
]
}
Será que se guardará el live en su canal ??
bello,,,, yo soy muy estupido para entender,, gracias
"Mejor pa' que!" Diria mi abuela.
Gracias!
no hay manera de simplificarlo todo un poco?
porque creas cada boton de manera individual y no variables y aplicas ellas?
Buenos tardes, alguien tiene el link del github? O es solamente para estudiantes de pago? Saludos.
Muy bueno. La primera parte. ¿Dónde esta la explicación del modo oscuro o la paginación que no salen en este video?
Aquí aprendible.com/tailwind
Hola! Por que cuando le doy a npm run dev no me levanta el servidor? Me dice que no se encuentra la pagina al darle al localhost:5173
38:01 no me funciona el hidden para todos los div. si me funciona si uso sm:hidden md:hidden pero el puro hidden no me oculta nada
Cuando le doy en guardar al html, no se organizan las clases y ya tengo instalado lo indicado en el video y no he podido solucionar ese error. Alguien puede ayudarme?
abajo de tu devDependencies en tu package.json, pon esto "prettier": {
"plugins": [
"prettier-plugin-tailwindcss"
]
},
Donde esta el enlace al zip?
oye y las imágenes?
hola, muy buena didáctica.... lastima que no le diste funcionalidad a los botones como indicaste en el video, ni tampoco al menu para mobiles 😢
Hola, esta es la primera parte del curso,, al final del vídeo te indico cómo acceder al curso completo dónde damos funcionalidad a los botones y demás características
He seguido los pasos del video para usar vite pero no me aplica los estilos que añado y no entiendo porque, si alguien puede ayudarme le agradeceria
En tu archivo principal .css estás importando con @tailwind? A mí me funciona si importo con @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
De pronto te puede servir
@@davidxcode lo acabo de probar ahora mismo y tampoco me cargan los cambios cuando aplico las clases, no se porque puede ser
Brilló por su ausencia el link a las imágenes.
Jajajaja XD
Y las imágenes?... Todo bien... excepto que prometieron las imágenes.... y no cumplieron...
Suban las imgs.
Que complicado y largo la instalacion de Tailwind. Instalar con npm hacer live preview.
No todos los maquetadores usamos Node y npm, lo cual me resulto re-complicado mas las extensioens para visualCode.
Pero en si Tailwind me parece interesante, aunque le falta re-usar las mismas clases en otros o heredarlas para no repetir los mismos hacen otros frameworks.
Si se puede..
@@AbelQuispeSeguro que se puede, pero la curva puede ser tediosa para proyectos pequeños.
Que vaina enreda