No tienes acceso a esta clase

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

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

C贸mo integrar componentes predefinidos con TailwindUI

6/31
Recursos

Aportes 17

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

Comparto la url del componente utilizado.
.
Y el comando para instalar los paquetes. 馃檶
.

npm i @heroicons/react @headlessui/react

Clase #6: C贸mo integrar componentes predefinidos con TailwindUI 6/31 馃搵


Tailwind

Tailwind es una herramienta que nos permite tener todos los elementos de estilos y que podemos combinar para crear interfaces y responsivas. En la p谩gina de Tailwind (aqu铆 el enlace) nos muestra varias plantillas dise帽adas con varias utiler铆as y recursos. No todas las plantillas de las interfaces est谩n gratuitas.

Para el ejemplo de las clase, ir a Components (en la parte superior del panel) y seleccionar en la lista de las plantillas a Hero Sections, para obtener el c贸digo del primer dise帽o (que es gratuito), seleccionamos en la lista desplegabe a React y le damos al Bot贸n <> Code aparecer谩 el c贸digo que debemos implementar en nuestro proyecto para tener esa interfaz.


HeroIcons


En la parte de los iconos los importa desde HeroIcons (enlace: aqu铆), que contiene los svg para la plantilla. En la documentaci贸n de HeroIcons (enlace: aqu铆) podemos ver los pasos para la instalaci贸n.

La instalci贸n nos dice que debemos ir a la consola y ejecutar: npm install @heroicons/react


Headless

Tambi茅n tenemos Headless (enlace: aqu铆) para la UI (la interfaz), al entrar a la documentaci贸n (enlace: aqu铆) nos indica que debemos instalar: npm install @headlessui/react

Una vez instalado todo de forma correcta, vamos a VSC y en el archivo index.js de la ruta src/pages vamos a return y sustituimos todo dentro de esa secci贸n por lo que sale en el <> Code de la plantilla Hero Sections de Tainwild que vimos anteriormente.

Tambi茅n agregamos los import, la constante navigation. Recordar de seleccionar todo y dar click derecho y seleccionar Format Selection With y escoger Prettier para que se ordene de forma autom谩tica las l铆neas de c贸digo.

  • Dato: Si aparecen errores como la direcci贸n del enlace de href=鈥#鈥 se puede cambar a href=鈥/login鈥


Guardamos y vamos a consola y ejecutamos npm run dev

Si al ejecutar npm run dev les sale las siguientes advertencias:

warn - As of Tailwind CSS v3.0, `warmGray` has been renamed to `stone`.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, `trueGray` has been renamed to `neutral`.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, `coolGray` has been renamed to `gray`.
warn - Update your configuration file to silence this warning.
warn - As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`.
warn - Update your configuration file to silence this warning.

Pueden agregar el siguiente c贸digo a tailwind.config.js:

let colors = require('tailwindcss/colors');

delete colors['lightBlue'];
delete colors['warmGray'];
delete colors['trueGray'];
delete colors['coolGray'];
delete colors['blueGray'];
colors = { ...colors, ...{ transparent: 'transparent' } }

module.exports = {
	content: ["./pages/**/*.{js,ts,jsx,tsx}",
			"./components/**/*.{js,ts,jsx,tsx}",
			"./public/index.html",
			"./src/**/*.{html,js}",],
	theme: {
		colors
	},
};

Fuente: aqu铆

instalamos las dependencias

npm install @heroicons/react @headlessui/react

modificamos el archivo index principal
src/pages/index.js:

import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'

const navigation = [
  { name: 'Product', href: '#' },
  { name: 'Features', href: '#' },
  { name: 'Marketplace', href: '#' },
  { name: 'Company', href: '#' },
]


export default function Home() {
  return (
    <div className="relative overflow-hidden bg-white">
      <div className="mx-auto max-w-7xl">
        <div className="relative z-10 bg-white pb-8 sm:pb-16 md:pb-20 lg:w-full lg:max-w-2xl lg:pb-28 xl:pb-32">
          <svg
            className="absolute inset-y-0 right-0 hidden h-full w-48 translate-x-1/2 transform text-white lg:block"
            fill="currentColor"
            viewBox="0 0 100 100"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <polygon points="50,0 100,0 50,100 0,100" />
          </svg>

          <Popover>
            <div className="relative px-4 pt-6 sm:px-6 lg:px-8">
              <nav className="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
                <div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">
                  <div className="flex w-full items-center justify-between md:w-auto">
                    <a href="#">
                      <span className="sr-only">Your Company</span>
                      <img
                        alt="Your Company"
                        className="h-8 w-auto sm:h-10"
                        src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                      />
                    </a>
                    <div className="-mr-2 flex items-center md:hidden">
                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                        <span className="sr-only">Open main menu</span>
                        <Bars3Icon className="h-6 w-6" aria-hidden="true" />
                      </Popover.Button>
                    </div>
                  </div>
                </div>
                <div className="hidden md:ml-10 md:block md:space-x-8 md:pr-4">
                  {navigation.map((item) => (
                    <a key={item.name} href={item.href} className="font-medium text-gray-500 hover:text-gray-900">
                      {item.name}
                    </a>
                  ))}
                  <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
                    Log in
                  </a>
                </div>
              </nav>
            </div>

            <Transition
              as={Fragment}
              enter="duration-150 ease-out"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="duration-100 ease-in"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Popover.Panel
                focus
                className="absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition md:hidden"
              >
                <div className="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
                  <div className="flex items-center justify-between px-5 pt-4">
                    <div>
                      <img
                        className="h-8 w-auto"
                        src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                        alt=""
                      />
                    </div>
                    <div className="-mr-2">
                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                        <span className="sr-only">Close main menu</span>
                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                      </Popover.Button>
                    </div>
                  </div>
                  <div className="space-y-1 px-2 pt-2 pb-3">
                    {navigation.map((item) => (
                      <a
                        key={item.name}
                        href={item.href}
                        className="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
                      >
                        {item.name}
                      </a>
                    ))}
                  </div>
                  <a
                    href="#"
                    className="block w-full bg-gray-50 px-5 py-3 text-center font-medium text-indigo-600 hover:bg-gray-100"
                  >
                    Log in
                  </a>
                </div>
              </Popover.Panel>
            </Transition>
          </Popover>

          <main className="mx-auto mt-10 max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
            <div className="sm:text-center lg:text-left">
              <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
                <span className="block xl:inline">Data to enrich your</span>{' '}
                <span className="block text-indigo-600 xl:inline">online business</span>
              </h1>
              <p className="mt-3 text-base text-gray-500 sm:mx-auto sm:mt-5 sm:max-w-xl sm:text-lg md:mt-5 md:text-xl lg:mx-0">
                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
                fugiat veniam occaecat fugiat aliqua.
              </p>
              <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
                <div className="rounded-md shadow">
                  <a
                    href="#"
                    className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 md:py-4 md:px-10 md:text-lg"
                  >
                    Get started
                  </a>
                </div>
                <div className="mt-3 sm:mt-0 sm:ml-3">
                  <a
                    href="#"
                    className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-100 px-8 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-200 md:py-4 md:px-10 md:text-lg"
                  >
                    Live demo
                  </a>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
        <img
          className="h-56 w-full object-cover sm:h-72 md:h-96 lg:h-full lg:w-full"
          src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
          alt=""
        />
      </div>
    </div>
  )
}

corremos el proyecto y verificamos que todo funcione correctamente

npm run dev 

Para los que tengan errores cargando las imagenes (como a mi me pas贸) recuerden agregar los dominios en el next.config.js

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['tailwindui.com', 'images.unsplash.com']
  },
}

Al 19 de diciembre de 2022, aseg煤rate de agregar la 鈥渃onst鈥 que est谩 entre 鈥渆xport鈥 y "return"de la template de Tailwind para que no te de el error:
ReferenceError: mobileMenuOpen is not defined

Sin贸nimos de 鈥淧or lo tanto鈥: por consiguiente, por ello, por esta raz贸n, en consecuencia, as铆 pues, por eso, de manera que, de modo que, de forma que, luego, as铆 que, por lo cual, por lo que, de tal forma que, de tal manera que, de tal modo que, o sea, es decir, debido a lo cual.

Algunos recursos que tal vez les sean 煤tiles.
paletas de colores
iconos para react
comprimir im谩genes
elementos UI

para los que trabajan el codigo hoy
08/06/2023
Primero elcodigo q encuentran en web no es el mismo. aca les entrego el codigo q usa el Profe :
import { Fragment } from 鈥榬eact鈥;
import { Popover, Transition } from 鈥楡headlessui/react鈥;
import { MenuIcon, XIcon } from 鈥楡heroicons/react/outline鈥;

import { Inter } from 鈥榥ext/font/google鈥;

const inter = Inter({ subsets: [鈥榣atin鈥橾 });

const navigation = [
{ name: 鈥楶roduct鈥, href: 鈥#鈥 },
{ name: 鈥楩eatures鈥, href: 鈥#鈥 },
{ name: 鈥楳arketplace鈥, href: 鈥#鈥 },
{ name: 鈥楥ompany鈥, href: 鈥#鈥 },
];

export default function Home() {
return (
<div className=鈥渞elative bg-white overflow-hidden鈥>
<div className=鈥渕ax-w-7xl mx-auto鈥>
<div className=鈥渞elative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32鈥>
<svg
className="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="currentColor"
viewBox="0 0 100 100"
preserveAspectRatio="none"
aria-hidden=鈥渢rue鈥
>
<polygon points=鈥50,0 100,0 50,100 0,100鈥 />
</svg>

      <Popover>
        <div className="relative pt-6 px-4 sm:px-6 lg:px-8">
          <nav className="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
            <div className="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
              <div className="flex items-center justify-between w-full md:w-auto">
                <a href="/login">
                  <span className="sr-only">Workflow</span>
                  <img className="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" />
                </a>
                <div className="-mr-2 flex items-center md:hidden">
                  <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                    <span className="sr-only">Open main menu</span>
                    <MenuIcon className="h-6 w-6" aria-hidden="true" />
                  </Popover.Button>
                </div>
              </div>
            </div>
            <div className="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
              {navigation.map((item) => (
                <a key={item.name} href={item.href} className="font-medium text-gray-500 hover:text-gray-900">
                  {item.name}
                </a>
              ))}
              <a href="/login" className="font-medium text-indigo-600 hover:text-indigo-500">
                Log in
              </a>
            </div>
          </nav>
        </div>

        <Transition
          as={Fragment}
          enter="duration-150 ease-out"
          enterFrom="opacity-0 scale-95"
          enterTo="opacity-100 scale-100"
          leave="duration-100 ease-in"
          leaveFrom="opacity-100 scale-100"
          leaveTo="opacity-0 scale-95"
        >
          <Popover.Panel focus className="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
            <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
              <div className="px-5 pt-4 flex items-center justify-between">
                <div>
                  <img className="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="" />
                </div>
                <div className="-mr-2">
                  <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                    <span className="sr-only">Close main menu</span>
                    <XIcon className="h-6 w-6" aria-hidden="true" />
                  </Popover.Button>
                </div>
              </div>
              <div className="px-2 pt-2 pb-3 space-y-1">
                {navigation.map((item) => (
                  <a key={item.name} href={item.href} className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
                    {item.name}
                  </a>
                ))}
              </div>
              <a href="/login" className="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100">
                Log in
              </a>
            </div>
          </Popover.Panel>
        </Transition>
      </Popover>

      <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
        <div className="sm:text-center lg:text-left">
          <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
            <span className="block xl:inline">Data to enrich your</span> <span className="block text-indigo-600 xl:inline">online business</span>
          </h1>
          <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
          </p>
          <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
            <div className="rounded-md shadow">
              <a
                href="/login"
                className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
              >
                Get started
              </a>
            </div>
            <div className="mt-3 sm:mt-0 sm:ml-3">
              <a
                href="/login"
                className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"
              >
                Live demo
              </a>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
    <img
      className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
      src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
      alt=""
    />
  </div>
</div>

);
}

tengan en cuenta que deben modificar los codigos en el file: talwling.config.js que es este:

let colors = require(鈥榯ailwindcss/colors鈥);

delete colors[鈥榣ightBlue鈥橾;
delete colors[鈥榳armGray鈥橾;
delete colors[鈥榯rueGray鈥橾;
delete colors[鈥榗oolGray鈥橾;
delete colors[鈥榖lueGray鈥橾;

colors = {
鈥olors,
鈥
transparent: 鈥榯ransparent鈥,
},
};

/** @type {import(鈥榯ailwindcss鈥).Config} /
module.exports = {
content: [鈥./pages/**/
.{js,ts,jsx,tsx}鈥, 鈥./components//*. {js,ts,jsx,tsx}鈥, 鈥./public/index.html鈥, './src//*.{html,js}鈥橾,
theme: {
extend: {},
colors: {
鈥olors,
},
},
plugins: [],
};

luego de hacer eso deben canbiar la version de @heroicons v1 a v2 con el siguiente comando :

npm install @heroicons/react@v1

y enhorabuena no pierdan tiempo como yo buscando y leyendo T_T

Aqui esta el component: Hero Section

Si se van directo a la pagina, el componente UI ya no esta disponible.

Por si alguien esta usando yarn :

yarn add @heroicons/react

@heroicons/react esta en la v2. Si alguien tiene conflicto solo tiene que cambiar import y los respectivos componentes.

Pasar de esto:

import { MenuIcon, XIcon } from '@heroicons/react/outline';

A esto:

import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'

@heroicons esta en la v2 y este curso uso la v1.

Solucion
instala la v1.

npm install @heroicons/react@v1

Me surgi贸 un error en la representaci贸n de los estilos.
Resulta que en el archivo de configuraci贸n tailwindcss.config.js hab铆a puesto

隆Espacios entre html, js y jsx!

module.exports = {
	content: ['./src/**/*.{html, js, jsx}'],
	theme: {
		colors: { ...colors },
	},
};

elimin茅 los espacios, todo funciona correctamente

module.exports = {
	content: ['./src/**/*.{html,js,jsx}'],
	theme: {
		colors: { ...colors },
	},
};

Espero ayudar a alguien 馃槄

Comparto las URL vistas en esta clase

Tailwindui

Heroicons

Headlessui

Iconos Alternativos

Instalar :

npm install react-icons --save

Reemplazar:

import { MenuIcon, XIcon } from '@heroicons/react/outline';

Insertar:

import { FaBars, FaTimes } from 'react-icons/fa';

A la fecha de hoy, el componente de Hero Sections propuesto por el curso, ya no es gratuito. O al menos a m铆 me propone un pago para usarlo. Si alguien encuentra forma de usarlo sin pago; comente.

Me es un poquito estresante copiar y pegar fragmentos de tailwind, entiendo el prop贸sito, pero no veo a煤n el esmero por armar una aplicaci贸n custom, continuar茅 aunque como el lorax.