Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Construye el header

19/29
Recursos

Aportes 24

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Enlace del logo en el repositorio: Imagen

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.

¿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 👍

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">&equiv;</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 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/

no logré que me corrieran primary ni secondary 🙃

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">&equiv;</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