Cómo integrar componentes predefinidos con TailwindUI

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 “const” que está entre “export” y "return"de la template de Tailwind para que no te de el error:
ReferenceError: mobileMenuOpen is not defined

Sinónimos de “Por 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 ‘react’;
import { Popover, Transition } from ‘@headlessui/react’;
import { MenuIcon, XIcon } from ‘@heroicons/react/outline’;

import { Inter } from ‘next/font/google’;

const inter = Inter({ subsets: [‘latin’] });

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

export default function Home() {
return (
<div className=“relative bg-white overflow-hidden”>
<div className=“max-w-7xl mx-auto”>
<div className=“relative 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=“true”
>
<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(‘tailwindcss/colors’);

delete colors[‘lightBlue’];
delete colors[‘warmGray’];
delete colors[‘trueGray’];
delete colors[‘coolGray’];
delete colors[‘blueGray’];

colors = {
…colors,
…{
transparent: ‘transparent’,
},
};

/** @type {import(‘tailwindcss’).Config} /
module.exports = {
content: [’./pages/**/.{js,ts,jsx,tsx}’, ‘./components//*. {js,ts,jsx,tsx}’, ‘./public/index.html’, './src//*.{html,js}’],
theme: {
extend: {},
colors: {
…colors,
},
},
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.