El curso ha sido un poco difícil en los temas de consola. Al profe no se salen errores que le salen a uno. Pero bueno, ahí vamos.
Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
11 Días
13 Hrs
21 Min
56 Seg
Construye el header
19/29Recursos
Aportes 26
Preguntas 2
Ordenar por:
¿Por que no actualiza el color primary o secondary, pero si lo reconoce el intellisense?
Corrí el comando npm run build, hasta entonces si actualiza.
pero esto no lo hizo @victor, ¿que me faltó?
Buena clase! Solo tengo una duda, esto de acá:
Ese ≡ wtf es? Es algo que lo trae solo Tailwind o es algo de HTML en general… No lo conocía pero me resulta bastante útil!
Para los que tengan errores al momento de cargar los colores primary o secondary dentro de su navegador les recomiendo dejar usar la extensión de LiveServer ya que no carga los scrips.
Si siguen teniendo inconvenientes pueden utilizar este comando dentro de la consola en la ruta de trabajo del proyecto: npx tailwindcss build css/tailwind.css -o public/css/style.css
Espero les sirva 👍
no logré que me corrieran primary ni secondary 🙃
Me ha gustado la forma en que se ha llevado el curso de Tailwind.
<h4>HEADER</h4>
En el archivo tailwind.config.js
extend: {
colors: {
'primary': '#f3c614',
'secondary': '#353535'
},
Crear archivo header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="px-2 bg-secondary text-white flex justify-between item-center">
<div><img class="py-1 h-8" src="./images/logo.svg" alt="logo">
</div>
<div class="text-2xl">≡</div>
</header>
</body>
</html>
En la consola
npm run build
Genial
faltan los archivos del curso
A mi me salía este error, cuando quería ejecutar ‘npm run build’, al parecer encontré una solución, instalen esto ‘postcss-cli’, añadido a eso, agregen al comando esto ‘–watch’. Debería quedar algo así:
“build”: “postcss css/tailwind.css -o public/css/styles.css --watch”
Con eso ya me dejo arrancar el comando y además queda escuchando para no estar ejecutando cada vez.
para los que no les funciona el color primary y secondary y les da error
tienen que ir a la carpeta
en mi caso esa es mi ruta platzifood/node\_modules/sucrase/dist/parser/traverser/util.js
en util.js tienen que cambiar```js
const l = _index.lookaheadTypeAndKeyword.call(void 0, );
```void 0, por contextualKeyword
```js
const l = _index.lookaheadTypeAndKeyword(contextualKeyword);
```y luego vuelven correr
npx tailwindcss -i ./css/tailwind.css -o ./public/css/style.css --watch
colors: {
‘primary’: ‘#f3c614’,
‘secondary’: ‘#353535e’
}
Por el tamaño el header que se hizo fue pensado para mobile, pero no se adaptó al tamaño de pantalla adecuado ya que estuvo trabajando a pantalla completa
Para los que lo les fiunciona el primary y secondary:
Agregar a package.json
“build”: " npx tailwindcss css/tailwind.css -o css/style.css --watch"
luego en la trerminal ejecutar npm run build y listo
Encontré este increíble generador de paletas https://www.tailwindshades.com/
Para que me cargaran los colores nuevos, tuve que agregar en el archivo package.json lo siguiente:
"scripts": {
"build": "postcss css/tailwind.css -o public/css/style.css -w"
},
y en la terminal:
npm run build
Si tienen problema para cargar los estilos intenten hacer la sigueinte configuracion al script:
"build": "postcss css/tailwind.css -o public/css/style.css -w"
},
<code>
<div class="px-2 h-12 items-center bg-secondary text-white flex justify-between">
<div class="flex flex-row items-center">
<img class="w-12 py-1 px-2" src="./images/food-truck.svg" alt="">
<h1 class="font-semibold ml-1 text-xl"> <strong class="font-bold text-primary">FOOD</strong> TRUCK</h1>
</div>
<div class="text-2xl">≡</div>
</div>
Si quisiéramos que nuestro icono “hamburguer”, se comportara como botón, es decir, que el cursor on hover sea la mano, hay que agregarle cursor-pointer como clase.
No se me actualizan los colores ya puse lo que pusieron los de mas y me da error
Error: Specified Tailwind config file “C:\Users\Acer\Desktop\Platzifood\tailwindcss.config.js” doesn’t exist.
at _default (C:\Users\Acer\Desktop\Platzifood\node_modules\tailwindcss\lib\lib\registerConfigAsDependency.js:16:11)
at C:\Users\Acer\Desktop\Platzifood\node_modules\tailwindcss\lib\index.js:83:58
at creator (C:\Users\Acer\Desktop\Platzifood\node_modules\postcss\lib\postcss.js:133:35)
at Object.<anonymous> (C:\Users\Acer\Desktop\Platzifood\postcss.config.js:3:31)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: postcss css/tailwind.css -o public/css/style.css --watch
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Acer\AppData\Roaming\npm-cache_logs\2020-05-29T07_10_45_444Z-debug.log
Me gusta como va quedando el website
Recuerden que para que carguen los colores nuevos es necesario hacer build a su css.
npm run build
Así va mi proyecto.
Excelente, muy rapido se crea el header con Tailwind.
La versión 2 de tailwind recomienda tener node a partir de la versión 12
Fue mi caso en que no me cargaban los estilos primary ni secondary, le agregue el watcher al archivo de configuracion “build”: “postcss css/tailwind.css -o public/css/style.css -w” inicie el npm ya que me habia salido de el ya que no apague el ordenador y le di “npm run build” en la consola y me cargo listo, espero les ayude esto ya que a mi me costo encontrarlo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?