No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Construye el header

19/29
Recursos

Aportes 26

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 馃憤

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">&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 鈥榥pm run build鈥, al parecer encontr茅 una soluci贸n, instalen esto 鈥榩ostcss-cli鈥, a帽adido a eso, agregen al comando esto 鈥樷搘atch鈥. Deber铆a quedar algo as铆:

鈥渂uild鈥: 鈥減ostcss 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.

colors: {
鈥榩rimary鈥: 鈥#f3c614鈥,
鈥榮econdary鈥: 鈥#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

鈥渂uild鈥: " 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">&equiv;</div>
      </div>

Si quisi茅ramos que nuestro icono 鈥渉amburguer鈥, 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 鈥淐:\Users\Acer\Desktop\Platzifood\tailwindcss.config.js鈥 doesn鈥檛 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鈥s (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 鈥渂uild鈥: 鈥減ostcss 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 鈥渘pm run build鈥 en la consola y me cargo listo, espero les ayude esto ya que a mi me costo encontrarlo