Introducción a Tailwind CSS

1. Te damos la bienvenida a la clase: Cuando se trata de construir sitios web, la mayoría de nosotros caemos en dos grupos, bien somos un diseñador o un desarrollador. Personalmente, no soy el mejor diseñador por ahí pero aún necesito que mis sitios web se vean bien, y aquí es donde entra Tailwind. También son otros frameworks y bibliotecas disponibles pero muchos de ellos hacen cumplir su propia forma estricta de hacer las cosas. Podemos escribir nuestro HTML como haríamos normalmente, y luego hacer uso de los nombres de clase cuidadosamente diseñados. Todas las clases de utilidad para brindar un aspecto limpio y profesional a tu proyecto todo mientras te quedas dentro de nuestro HTML. Esto es especialmente útil para cuando un proyecto crece en lugar de pensar consistentemente en nuevos nombres de clase y hojas de estilo cada vez mayores. Tailwind ofrece un sistema de diseño consistente que todo su equipo puede utilizar. Comprar utilidades simples para controlar casi todo como espaciado, colores, tipografía, diseño responsive, y diseño. Como alguien que ciertamente no es el mejor diseñador por ahí, Tailwind realmente ha ayudado a darle a mi sitio web una base profesional sobre la que construir. Actualmente es mi go-to al iniciar un nuevo proyecto. Permítanme enfocar en lo que mejor hago. ¿Cómo funciona? Una vez que Tailwind esté incluido en tu proyecto y vamos a cubrir cómo hacerlo en la clase, usarlo en tu proyecto es fácil. Empezamos agregando nuestro HTML tal como haríamos normalmente, agregamos el contenido a la pantalla. En este ejemplo se muestra una sección que contiene algún texto dentro sin ningún estilo que veas en la esquina inferior derecha. Esto se ve bastante aburrido en la pantalla. Alojándose aquí dentro de nuestro HTML, Tailwind nos proporciona estas clases de utilidad las cuales podemos aplicar. A partir de estas envolturas de sección he agregado tres de estas clases las cuales son bastante descriptivas para cada una lo hace. Cada clase hace una cosa simple, y la primera es bg-gris-800. Esto establece el fondo para que sea gris, y luego sombreas de 800. También veremos las paletas de colores más adelante en el curso también. P-six es un valor de patrón de seis y podemos aumentar o disminuir este número con más o menos espacio en. Text-center se utiliza para centrar el texto contenido en su interior. Por supuesto, el texto dentro ahora es difícil de leer por lo que pasaremos a peinar los elementos p. Nuevamente, agregamos los atributos de clase que son elementos, y al igual que la envoltura externa nuevamente hacemos uso del color del gris. Pero esta vez aplicamos el tono más claro de 200. Text-lg es para texto más grande y el medio de fuente es el peso de la fuente que vamos a aplicar. El resultado es una sección de aspecto limpio sin siquiera escribir ningún código CSS. Además, no queremos que todos los sitios que creamos tengan el mismo aspecto, y aún podemos escribir nuestros propios estilos si queremos. Tailwind tiene muchas opciones de personalización disponibles para hacer nuestro sitio más único. En esta clase aprenderás sobre estas utilidades y mucho más que Tailwind tiene para ofrecer. Todo mientras construyes un proyecto de administración estilo Dashboard, muestra una lista de productos disponibles en nuestra tienda. Como vemos aquí será responsive y se encargará del diseño de la pantalla grande y la pequeña. Esta clase está enfocada al principiante aunque debes sentirte cómodo con HTML y CSS antes de aprender Tailwind. Tailwind es una gran habilidad para aprender, y estoy deseando enseñarte todo al respecto durante esta clase. 2. Requisitos previos y herramientas necesarias: Tailwind es un framework CSS, y por lo tanto, es esencial que al menos entiendas los conceptos básicos de HTML y CSS antes de tomar este curso. Si has usado HTML y CSS en el pasado, ya sea durante el curso existente, uno de mis cursos, o construiste cualquier proyecto simple, deberías estar bien para ir. Es muy poco lo que necesitas para tomar esta clase. Si has construido algún tipo de sitio web en el pasado, probablemente ya tengas estas habilidades que necesitarás. Un editor de texto es esencial, y estaré usando Visual Studio Code. Puedes descargar esto, o puedes usar cualquier otro que prefieras. Si necesita descargar, el sitio web está terminado a la derecha, que es code.visualstudio.com. Está disponible de forma gratuita en Mac, Windows y Linux. Si aún no tienes uno, adelante y descarga esto. También se requiere una terminal. No te preocupes si nunca has usado uno. Sólo necesitamos unos comandos simples. Visual Studio Code viene con un terminal ya preincorporado, o si ya tienes un terminal independiente que prefieres usar, esto también está completamente bien. No hay herramientas adicionales a las que necesitemos suscribirnos, ni comprar. Cualquier otra herramienta o software que necesitemos, vamos a descargar a medida que avecinemos el curso. 3. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido de la clase. También recuerda compartir tu proyecto hasta aquí en Skillshare y solo lo revisaré, pero también inspirará a compañeros de estudios también. Para obtener más información sobre el proyecto de clase dirígete la pestaña Proyecto y Recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 4. Descripción de Wireframe: Para ayudarte a entender mejor lo que vamos a construir a través de esta clase, he creado un boceto de estructura alambrada el cual está disponible para que lo descargues. Si lo deseas, puede ser útil descargar y mantenerte a tu lado como referencia de lo que vamos a estar construyendo durante esta clase. Wireframe muestra la mirada general básica a cómo se colocará todo el proyecto. Por encima de la izquierda, tenemos el tamaño completo, vista de pantalla más grande, que tiene una barra lateral a la izquierda, y el detalle del producto al lado de la derecha. Después, sobre el lado derecho de esta imagen, tenemos una pequeña vista de pantalla la cual tiene el contenido apilado, y también optimizada para pantallas más pequeñas. Tailwind también se utilizará para este diseño responsive, junto con el estilo general también. Si deseas usar esto como referencia, puedes descargarlo ya. Además, he proporcionado las mismas imágenes que he usado, y estas están disponibles para descargar con esta clase. Puedes hacer uso de estos o si lo prefieres, puedes usar algunos propios. Crear un estilo de proyecto diferente. Si lo deseas, adelante y descarga estas imágenes, y también el wireframe. A continuación, echaremos un vistazo a cómo empezar con este proyecto y cómo configurar también tail up. 5. Configuración de Tailwind: Tailwind nos ofrece múltiples opciones de configuración, dependiendo de lo que utilicemos para construir nuestro sitio web y también de qué características queremos apoyar. En este video vamos a echar un vistazo a algunas de las diferentes opciones de configuración. Pero primero, necesitamos crear un nuevo proyecto. El proyecto necesitará una carpeta de proyecto y voy a crear la mía en el escritorio. Haga clic derecho en “Nueva carpeta” y puede colocar esto en cualquier lugar de su máquina la cual prefiera. El mío se llamaría Bar de Jugos Saludables. Nuevamente, esto es opcional, puedes cambiar el tema y el estilo de tu proyecto, pero el mío se va a basar en una barra de zumos para luego diferentes tipos de batidos. También del último video debiste haber descargado las imágenes y el wireframe, te gustaría usar estas. Voy a poder arrastrar estas imágenes al proyecto para su uso posterior. Si sí quieres usar la tuya propia, crea una carpeta de imágenes, y luego puedes agregar las diferentes imágenes dentro de aquí. El único que no tendrás es esta foto mía, pero puedes descargar una foto tuya para usarla en este proyecto. A continuación, abre tu Editor de texto o Código de Visual Studio. Arrastre sobre la carpeta del proyecto para abrir esto. Entonces, como siempre estamos creando un nuevo sitio web, necesitamos crear un nuevo archivo que es nuestro index.html. Puedes usar los atajos Comando o Control N, que crearán una nueva página, o si lo deseas puedes pasar el cursor sobre el título y barra lateral y usar este icono para crear una nueva página. Dale a esto un ahorro, y este es el index.html. Justo antes de empezar a escribir cualquier código si echamos un vistazo a la estructura alambrada, lo que tenemos que hacer es decidir primero qué vamos a crear primero. Podemos ver por estas imágenes tenemos dos secciones distintas. Tenemos esta área de barra lateral, y también tenemos esta área de contenido principal sobre a la derecha. Lo mismo con la pantalla más pequeña tenemos la barra lateral que está en la parte superior y luego el área de contenido principal justo debajo. Tenemos dos secciones distintas que necesitamos crear. Volver a nuestra página de índice, si está utilizando Visual Studio Code, puede hacer uso del comando Emmet incorporado, que es un atajo para crear nuestro repetidor HTML. Esto es HTML:5, hit “Enter”, esto nos dará la estructura básica que necesitamos. El título del documento es Healthy Juice Bar. Como habíamos visto antes dentro de la sección del cuerpo tenemos nuestras dos secciones principales, y la primera son los elementos a un lado. Junto a esto también se encuentra la sección de contenido principal. Empecemos a trabajar dentro de la sección aparte, vamos a añadir un poco de contenido con el que trabajar. Como se puede ver dentro de la barra lateral en el marco alambrico, tenemos un logotipo o una imagen en la parte superior de la barra lateral y luego el título justo debajo. Esto es lo mismo para ambos de la disposición. El aparte, crear los elementos de imagen, y dentro de la carpeta de imágenes suministradas, tenemos una imagen que es el logo.png, el texto antiguo. Entonces justo debajo de nuestra imagen, como acabamos de ver, crearemos un encabezado de nivel uno para el título a un lado. Este es el Healthy Juice Bar, o el nombre de su elección. Abramos esto en el navegador. En primer lugar, guarde este archivo, y luego voy a copiar el camino a esto, abrir Google Chrome y luego pegar esto dentro. Un aspecto bastante estándar como se esperaba, tenemos la imagen y nuestro título. Ahora lo que vamos a hacer es dirigirnos a la documentación de Tailwind y ver cómo podemos configurar esto en nuestro proyecto. Para la instalación de Tailwind, necesitamos ir a “TailwindCss.com”, y desde la página de inicio, tenemos un enlace aquí a la documentación. De la documentación la página que necesitamos es este enlace de instalación justo aquí. Esta página de instalación tiene algunas guías diferentes sobre cómo podemos configurar Tailwind usando diferentes marcos y bibliotecas. Por ejemplo, si utilizas en un Vue o React o Gatsby, ten algunas guías de instalación dedicadas para estos. Vamos a estar manteniéndolo simple y solo incluir Tailwind en un proyecto HTML regular. Empezando por la forma más sencilla que es utilizar un enlace CDN. Por encima de la derecha, dirígete hacia abajo al enlace que está usando Tailwind vía CDN. Esto nos va a dar un enlace de hoja de estilo que podemos utilizar para caer directamente en nuestro proyecto. CDN es una red de entrega de contenido y es una forma de tener nuestro contenido, en nuestro caso, el archivo CSS Tailwind, disponible en todo el mundo en múltiples servidores o centros de datos. Si tan solo copiamos este enlace y lo pegamos en una nueva pestaña, este es el archivo CSS al que estamos enlazando. Por supuesto, por el momento sí se ve un poco desorden porque no está formateado. Echaremos un mejor vistazo a esto en el Editor de textos muy pronto. Pero lo clave a tener en cuenta aquí es que estamos vinculando a un archivo CSS de Tailwind, que está alojado en un servidor externo, lugar de descargar este archivo e incluirlo en nuestro proyecto. Por ahora vamos a copiar este enlace completo de la documentación y luego podemos pegar esto dentro de la sección de cabecera de nuestra página de índice. Dale a esto un ahorro. Ahora si pasamos a nuestro proyecto, actualiza el navegador, al instante vemos un ligero cambio en nuestro contenido. Esto es algo bueno porque ahora significa que el archivo CSS Tailwind ya ha entrado en vigor. El motivo por el que vemos un cambio inicialmente es por un conjunto de estilos base que aplicará Tailwind. Estos estilos base no están realmente destinados a agregar estilo a nuestro proyecto, sino que en su lugar, son un conjunto de estilos para hacer que nuestro sitio renderice de manera más consistente a través de diferentes navegadores. Si has usado un archivo CSS normalizado en el pasado, mucho se basa en esto. ¿ Y las clases de utilidades Tailwind? Bueno, estos también están disponibles con el link CDN. Ahora vamos a echar un vistazo a algunos ejemplos sencillos dentro de aquí. En primer lugar, trabajaremos en la sección aparte y todo lo que necesitamos hacer es agregar unos atributos de clase regulares. Después agrega nuestra primera clase utilitaria que es P-4. Ahora si actualizamos el navegador, podemos ver un valor de relleno de cuatro, se está aplicando a estos elementos. Sencillamente, lo siguiente a echar un vistazo es agregar un fondo, y lo podemos hacer con bg, seguido del color que voy a usar como gris. Entonces la sombra de gris, que es 800. Vamos a echar un vistazo más profundo a todos los tonos y colores en un video futuro, pero por ahora, esto debería aplicarlo a nuestra sección lateral, dado que se trata de color de fondo gris oscuro. El imagen, bajar a los elementos de imagen y añadir nuestra clase en. la imagen se necesitará una altura y un ancho. Usando Tailwind, esto es relativamente sencillo. Utilizar h para la altura, el valor de 32. Echaremos un vistazo a lo que significan todos estos valores muy pronto. El ancho, también podemos hacer con w y hacer la plaza. Mantendremos esto como el mismo valor. Refrescar. El tamaño ya ha entrado en vigor. Ya que tenemos este color gris de fondo oscuro, también necesitamos agregar algunas clases a nuestro H1, para que esto destaque sobre este fondo oscuro. El color blanco, podemos agregar texto, guión, blanco. Refresca, y esto al instante entra en vigor. También podemos transformar esto para que sea mayúscula con esta utilidad. Tendremos clases de utilidad disponibles para casi cualquier tipo de propiedad CSS, que desea agregar. Podemos establecer el camino de la fuente y en este caso, vamos por nuestro medio de fuente. Guardar. Deberían ser un poco más audaces de lo que era antes. Tenemos un montón de diferentes tamaños de texto y opciones. Para este rubro, voy a ir por texto para sobresalir. El último para el rumbo de nivel 1 va a estar rastreando más ancho. Esto agregará un poco de espacio extra entre nuestras letras. Ya podemos empezar a ver agregando algunos nombres simples de clases de utilidad, realmente podemos marcar una gran diferencia en el estilo de nuestro sitio. El enlace CDN, que configuramos en la parte superior, es genial para aprender tailwind, y estará bien para la mayoría de este curso, y también, algunos proyectos más sencillos también. También hay algunos inconvenientes de usarlo. Podemos ver algunos de estos si volvemos a la documentación de Tailwind, podemos ver algunos de los inconvenientes aquí que tenemos al usar el enlace CDN, como no podemos usar ninguna de las directivas como aplicar, que vamos a echar un vistazo a más adelante en el curso. Además, no podemos hacer algo llamado agitación de árboles, que es una forma de eliminar cualquier estilo no utilizado de todas las construcciones finales, lo que significa que el tamaño del archivo será más grande. Para ayudar con esto, vamos a instalar el viento de cola usando la CLI. Haga clic en el enlace Tailwind CLI a la derecha. Para ello, necesitamos instalar node.js, y también necesitamos hacer uso de algunos comandos de terminal. Esto a menudo puede asustar a la gente, pero en realidad son solo unos sencillos pasos por los que te voy a guiar. Empecemos instalando node.js, que está disponible en nodejs.org. Ya tengo node.js setup en mi computadora, pero si aún no lo tienes instalado, adelante y descarga la última versión ahora, y vuelve una vez que esto se haya hecho. Una vez hecho esto, puedes o abrir tu propio terminal el cual quieres usar o en mi caso, voy a mantenerlo sencillo. En Visual Studio Code, si vamos a la opción terminal, abre una nueva terminal desde aquí. Una vez que abras la terminal dentro del código de Visual Studio, debería abrirse automáticamente dentro de tu directorio de proyecto. Paso 1, es primero asegurarnos de que hemos instalado correctamente el node.js. El modo de hacerlo dentro de la terminal, es escribir el comando que es node-v. Si esto devuelve un número de versión, esto significa que instalamos correctamente el node.js. Lo siguiente que tenemos que hacer es ejecutar la CLI de Tailwind. Para esto, volvamos a los docs. Podemos ver aquí tenemos un comando, y necesitamos copiar esto y añadirlo dentro de la terminal. Esta herramienta MPX está disponible ya que acabamos de descargar node.js, que también viene incluido con MPM en esta herramienta MPX. Agarramos este mando completo. Copia esto, y pega esto dentro de la terminal. Golpea “Enter”. Podemos acordar instalar en el paquete Tailwind. Tan solo dale a esto unos momentos para armar las cosas. Una vez que esto termine, podemos entrar en la barra lateral. Podemos ver que ahora tenemos este archivo tailwind.css. Este es el mismo archivo CSS que usamos antes. Bueno, voy a vincular esto con la CDN. Ahora lo podemos ver más claramente ya que esto está formateado dentro del editor. Lo primero que vemos en la parte superior es el conjunto de estilos base, que se utiliza para renderizar nuestro sitio de manera más consistente a través de diferentes navegadores. Hace cosas como restablecer cualquier valor de relleno y margen, configurará familias de fuentes predeterminadas, y generalmente dará una apariencia consistente a nuestros elementos HTML. Pero, ¿qué pasa con las clases de utilidad que acabamos de utilizar? Bueno, hagamos una búsqueda. Uno de los que usamos antes es este color de fondo de gris. Pasemos a nuestro archivo CSS. Utilice Comando o Control F para utilizar el buscador. Busquemos nuestro LBG gris 800. Más abajo el archivo CSS o 15,000 líneas en él, podemos ver que tenemos una referencia a esta clase. Esto está configurando nuestro color de fondo gris. Justo arriba, tenemos la sombra de 700, que es una versión más ligera. Podemos ver, si nos desplazamos un poco más hacia arriba, tenemos todas estas opciones, que es de sombra gris 50 hasta 900, que es la más oscura. Tenemos entonces las versiones rojas con todos los mismos valores de sombra. También encontrarás muchos otros colores también. Si otra cosa que ya hemos utilizado es la clase de altura, hagamos una búsqueda de h-32 y echemos un vistazo a la primera ocurrencia. Para cada uno de estos valores como 32 o 28, todos estos corresponderán a un solo valor de altura, que está en gramos. En nuestro caso, el h-32, que hemos aplicado a nuestra imagen, aplicará ocho llantas de altura. Podemos aumentar o disminuir estos valores para darnos un valor de RAM diferente. Echemos un vistazo a una más. También tuvimos cuatro medio solo escuchar. Si buscamos y podemos ver se ha aplicado el peso de la fuente de 500. También tenemos luz extra, tenemos luz, normal, semi negrita, negrita, y también extra negrita también. Ahora, tenemos copia propia de nuestro archivo Tailwind en el proyecto. Lo que tenemos que hacer es reemplazar este enlace CDN. Elimina esto y como nuestro archivo Tailwind está directamente al lado de nuestro índice, podemos enlazar a esto con el nombre de tailwind.css. Di esto. Actualiza el navegador. Todos nuestros mismos estilos de viento de cola siguen aplicándose. Pero esta vez reemplazaremos el link CDN por nuestra propia versión local. 6. Configuración de servidor en vivo: Añadir constantemente cosas nuevas a nuestro proyecto, guardar el archivo, pasar al navegador y luego refrescarse para ver cualquier actualización, tiempo puede llegar a ser realmente tiempo. Es por eso que quería mostrarte rápidamente por plugin que está disponible desde Visual Studio Code el cual podemos usar para ahorrarnos algo de tiempo. Este plugin nos permitirá hacer cambios a nuestro editor, presionar “Guardar” y luego un servidor en vivo mantendrá constantemente nuestro proyecto actualizado dentro del navegador. Instalar esto es opcional y no necesitas configurarlo si no quieres. En cambio, solo puedes seguir actualizando el navegador después de cualquier cambio de editor. Si sí quieres instalar esto para ahorrar un poco de tiempo, lo que puedes hacer es entrar en el botón Extensiones justo aquí. Ya tengo este plug-in configurado el cual puedes ver aquí. Si no lo haces, haz una búsqueda en la parte superior de servidor en vivo, y luego haz clic en esta opción, justo aquí. Dado que la mía ya está configurada y habilitada, puedes ver el botón de deshabilitar en la parte superior. Esta es la primera visita a este plugin. Deberías ver el botón Activar justo aquí. Después ejecuta esta extensión y configura nuestro proyecto con el servidor en vivo. Todo lo que tenemos que hacer es dar click en este botón de “Ir a Vivo” en la parte inferior. Esto debería entonces abrir esto en el navegador predeterminado y luego realizar un seguimiento de cualquier cambio en nuestro sitio. Por ejemplo, si seguimos adelante y cambiamos nuestro fondo para que sea rojo, se guarda y esto se actualizará automáticamente dentro del navegador sin necesidad de actualizar. Sólo reinstemos este color gris del proyecto. Esta es tu herramienta estatal la cual me gusta usar, y espero que también la encuentres útil. 7. Móvil en primer lugar y la paleta de colores: Al igual que con muchos de los marcos modernos, Tailwind también tiene el concepto de primer diseño móvil. Esto significa que comenzamos diseñando para la vista de pantalla pequeña, para empezar, y luego a medida que obtenemos más espacio disponible en pantalla, podemos agregar o anular cualquiera de los estilos existentes. Esto puede tener sentido porque mucho del estilo del curso permanecerá para todos los tamaños de pantalla, como los colores y fuentes y solo podemos hacer algunos cambios de diseño o tamaño cuando tengamos más espacio disponible en pantalla. Volver a la alambrada. Al mirar la pantalla pequeña sobre la derecha, esto es con lo que vamos a empezar. El diseño para esto en realidad no necesita mucho trabajo, ya que muchos elementos del sitio web tienden a fluir naturalmente de esta manera de todos modos. Ya tenemos un logo en la parte superior y también el título. A continuación, bajamos al menú. Volver al proyecto. Ya que estamos tratando con la vista de pantalla pequeña, podemos reducir el navegador, tomar sólo el ancho mínimo. Lo que vamos a hacer es ir a la sección aparte, justo debajo del rumbo nivel 1. Aquí podemos crear nuestros enlaces dentro de la lista desordenada. Pero ahora crearemos nuestros artículos de lista. Tenemos seis enlaces diferentes y estos sólo se van a desestilizar por ahora. El primero, de nuevo sin clases de utilidad para pasar en el enlace. Por ahora, no tenemos páginas extra para enlazar estos dos, por lo que un href vacío está bien. El primer enlace es para productos. El segundo ítem de lista, éste va a tener el contenido de los pedidos. Número 3, éste es para el inventario, y a continuación, tenemos a los clientes. El número 5 es para la analítica. El último va a ser por cupones. Guarda esto e incluso puedes refrescarte. Voy a arrancar el servidor en vivo. Podemos ver en la parte superior, tengo seis enlaces. Como se mencionó antes, cuando usamos HTML por su cuenta, generalmente puede para bastante bueno para la vista de pantalla pequeña en términos de diseño, solo necesitaría agregar un poco de estilo para que se vea bien. Para que se vea bien, vamos a necesitar algunas utilidades de Tailwind. Para ver una lista de todas las utilidades a las que tenemos acceso, dirígete a la página principal de Tailwind y luego haga clic en el enlace de documentación. El Tailwind Docs es una gran referencia para todas las clases de utilidades. Llevo algún tiempo usando Tailwind, y todavía lo uso como referencia. la izquierda, tenemos una lista de todas las secciones de utilidades que tenemos disponibles como si quieres hacer uso del flexbox, el cual estarás pronto, podemos usar utilidades de espaciado, utilidades de dimensionamiento, tipografía diferente como la fuente tamaños, diferentes colores, la familia de fuentes, y también muchos efectos y bordes diferentes a los que podemos añadir. Por supuesto, aquí hay muchas secciones diferentes, pero en la que nos vamos a centrar es la paleta de colores. Hagamos una búsqueda por la parte superior de la paleta de colores. Este es el que necesitamos justo aquí. Después desplázate hacia abajo, podemos ver una lista de todos los colores que tenemos disponibles. Ya hemos utilizado algunos de estos en nuestro proyecto, como el color gris, y podemos ver que estos tienen un tono desde 50 hasta 900, al igual que hemos visto dentro del CSS Tailwind. Podrás ver todos los diferentes colores que tenemos disponibles para empezar. Estos se adaptarán a muchos casos de uso diferentes. Todos estos colores, que son los mismos, se pueden aplicar a un montón de cosas diferentes. En primer lugar, seleccionamos un color como el rojo y el tono de 400. Entonces a la derecha, tenemos algunas aplicaciones para este color. Tenemos el prefijo BG, que hemos utilizado para establecer el color de fondo. También tenemos los prefijos de texto en el color del texto, y también si queremos un borde, podemos usar un color para esto también. Esta es una buena forma de mantener las cosas consistentes en nuestros proyectos. Siempre tenemos acceso a todos estos colores y tonos, y luego podemos simplemente usar un prefijo diferente para aplicarlo a diferentes secciones. De vuelta al proyecto, vamos a aplicar algunos colores a nuestros enlaces y encogemos esto hacia abajo. En primer lugar, estableceremos el color del texto para cada uno de estos enlaces. Tenemos que saltar al elemento a en el atributo de clase. El primero, empezaremos con el prefijo del texto, el color, todo sobre la sombra. Ahí está el primero, y muchas veces lo que queremos hacer con este tipo de enlaces es crear un estilo diferente o un efecto diferente cuando el usuario pasa el cursor sobre el texto. Para esto, voy a aplicar un efecto flotador. El modo de hacerlo es aplicar cualquiera de estas clases de utilidad, igual que haríamos normalmente, pero agregamos el prefijo hover seguido de los dos puntos. Por ejemplo, si quisiéramos cambiar el fondo, usaríamos BG y estableceríamos el color que queremos aplicar. Yo a ir por grado 700, ahorrar. Ahora cuando pasamos el cursor sobre los productos, ahora podemos ver el cambio de color de fondo. También podríamos agregar tantos estados de hover como queramos. Ya que cambiamos el color de fondo, también voy a cambiar el color del texto. Nuevamente, coloque en el estado flotante seguido de los dos puntos, cámbielo para que sea el texto blanco. Podemos probar esto en el navegador. Tan pronto como pases por encima de esto, podemos ver un sutil cambio en el color del texto. Contentos con esto por ahora, por lo que podemos aplicar esto a todos nuestros enlaces. Solo copiemos esta sección de clase. Bueno, primero enlace y coloca esto en todo el resto de estos enlaces. Asegúrate de que esto esté en los seis. Podemos ver esto ahora aplica dentro del navegador, así como este prefijo hover. Al igual que con CSS regular, también podemos apuntar a otros estados también. En lugar de flotar, podríamos cambiar a otro estado como el activo o el enfoque. Hacemos esto exactamente de la misma manera. Justo antes de pasar al siguiente video para ver algún espaciado, hay algunos elementos que primero necesitamos agregar a esta sección. Dentro de la alambrada. Si mirará los enlaces en la parte superior que acabas de agregar, junto al enlace de órdenes vemos un número 5. Esto es para mostrar cuántos pedidos tenemos disponibles actualmente. También tiene este círculo de fondo también. Después del último enlace, también podemos ver este icono de engranaje, que es un enlace a la configuración. Empecemos con el ícono numérico, que va justo después de nuestro enlace de pedidos. Coloque esto dentro y aún dentro de nuestro elemento de lista, y luego coloque el contenido como el número 5. Podemos apenas ver esto en la pantalla, pero esto es un poco demasiado oscuro, por lo que necesitamos agregar algunas clases de utilidad. Para el texto, voy a aplicar un color verde con la sombra de 900, y también un color de fondo verde demasiado así bg verde, y esta vez el tono 100. El tamaño de fuente que podemos aplicar con dash sm, para darle el tamaño pequeño. Después para acolchar el color de fondo de verde. Añadamos un valor de relleno, que va a ser igual a 1.5. Estamos empezando a llegar a algún lugar del navegador. Ahora si miramos esto, tenemos un color cuadrado. También necesitaremos redondear los bordes usando las clases de utilidades Tailwind. Nosotros, en primer lugar, tenemos la clase redondeada, y esto da un pequeño borde redondeado. También contamos con diferentes tamaños redondeados. Por ejemplo, podemos aplicar un redondeo grande y esto es un poco más grande, pero también podemos hacer esto totalmente redondeado también, con redondeado completo. Esto está bien. El último que hay que hacer es colocar el icono del engranaje hacia abajo en la parte inferior y esto está justo debajo de nuestro enlace de cupones. Además, asegúrate de que esto esté fuera de la lista desordenada. Nuevamente, esto se puede colocar dentro de un elemento span. Para el icono del engranaje, esta va a ser una entidad HTML. Una entidad HTML es una forma de incluir un icono en nuestros proyectos, y podemos aplicarlos usando ciertos códigos. Si no estás seguro sobre el uso de entidades HTML, una rápida búsqueda en Google te dará un montón de sitios web donde podrás encontrar los códigos disponibles que puedes utilizar. En primer lugar, el código que necesitamos aplicar es el ampersand, el hash, el valor de 9881, seguido del punto y coma. Si ahora ves un icono de engranaje en la parte inferior aquí, y solo haces esto un poco más grande, podemos usar una clase de utilidad Tailwind de texto y el tamaño de este texto será 2xl. Ahí vamos. El contenido ahora está en su lugar, pero todo este contenido que acabamos de agregar, se ve un poco demasiado agrupado. Aquí es donde entran las utilidades de espaciado. Esto es lo que veremos a continuación con más detalle. 8. Utilidades de espaciado: Al diseñar o construir cualquier sitio web, espaciado siempre es una consideración importante, y con CSS regular tenemos tanto margen como también relleno para ayudar a controlar esto. Como hemos visto brevemente en los videos anteriores, Tailwind también proporciona algunas clases de utilidad práctica también. Empezando por el relleno, que es el espaciado interior de un elemento, podemos agregar relleno a los cuatro lados de un elemento usando P seguido de un valor. Veremos cuáles son estos valores en tan solo un momento pero por debajo de esto, también podemos ver que podemos aplicar relleno a un solo sitio también, ya sea en la parte superior, derecha, inferior, o a la izquierda. Como un pequeño atajo también podemos aplicar relleno a dos lados. Si has usado alguna coordenada en el pasado, estarás familiarizado con el eje x y el eje y. X es horizontalmente, por lo que esto aplica el relleno a la izquierda y a la derecha, y el eje y agrega relleno tanto la parte superior como la inferior. El margen, esto funciona igual, pero usamos el prefijo m en lugar del P. Nuevamente, podemos agregar relleno a todos los lados o controlarlos individualmente. También a la izquierda y a la derecha juntos, o podemos agrupar la parte superior e inferior. Bueno, ¿qué pasa con estos valores como cuatro? ¿ Son píxeles? M REM son algunos de la unidad? Bueno, todo esto se relaciona con un valor REM que podemos ver en el archivo CSS. Podemos ver cuáles son exactamente estos valores, si entramos en la barra lateral y luego abrimos el archivo CSS tailwind. A partir de aquí, busquemos algunas de nuestras utilidades de espaciado. Vamos por P-0, y echemos un vistazo a la primera ocurrencia. Recorre estos y lo que buscamos es una clase P-0 que acabamos de ver en las diapositivas. Como era de esperar esto aplica un valor de relleno de cero. Después de cada tamaño adicional tenemos uno, tenemos dos, tenemos tres, cada uno de estos agrega un valor de relleno diferente en REM. Un cuarto REM, mitad REM, tres trimestres y un REM es P-4. Todos estos van por debajo de los incrementos trimestrales y van hasta arriba. Si nos desplazamos hasta el último, este es el valor de 96, que aplica relleno de 24 REM. Si sí quieres saber exactamente cuáles son cualquiera de estos valores, solo haz una búsqueda rápida dentro del archivo. De hecho ya hemos utilizado algunos de estos valores de relleno dentro de nuestra página de índice. Utilizamos un valor de relleno de cuatro con los elementos a un lado, y sigamos adelante y agregamos un poco más de espaciado a este proyecto. El título, algún espaciado en la parte superior e inferior que vamos a aplicar con margen y Esta es una H1 y coloquemos esto al final. Margen, el eje y y luego el valor de cuatro. Ahorra, y ahora se aplica algo de espaciado en la parte superior e inferior de nuestro encabezado. Lo mismo para cada uno de estos enlaces. Estos enlaces, también vamos a usar un valor de relleno en lugar de margen. Esto se debe a que si pasamos por encima de alguno de estos enlaces, podemos ver que tenemos un pequeño fondo aplicado. Queremos que este fondo sea un poco más grande para rodear el texto, así que vamos a aplicar un valor de relleno de dos, p-2. Si pasamos por encima de este enlace podemos ver que el relleno se ha aplicado. Un par de cosas a tener en cuenta aquí en primer lugar, el texto del producto ha sido empujado desde la izquierda. Bueno, esto está bien por ahora porque vamos a mover todo el texto al centro de esta sección muy pronto. También muy pronto vamos a aplicar algún espacio entre cada uno de estos enlaces. También podemos aplicar la clase de utilidad redondeada a este enlace también. Podemos ver esto mejor si pasamos el cursor y podemos ver los bordes redondeados sobre este fondo. Ahora si aplicamos esto a los seis de nuestros enlaces, copia el relleno y la clase redondeada, y agrega esto a nuestro segundo enlace. Apenas por el lapso así dejamos esto, dejamos ese enlace, 4, 5 y 6. Vamos a probar esto antes de seguir adelante. Genial. Todo esto está funcionando y lo siguiente a hacer es agregar el espaciado vertical entre cada uno de estos enlaces. Una forma de hacerlo es agregar algún margen a cada uno de estos enlaces, o aún más fácil Tailwind proporciona una utilidad llamada espacio entre. Tenemos muchos elementos infantiles como este, como múltiples enlaces. Normalmente queremos algún espacio entre cada uno. Pero algunas de las soluciones comunes tienen problemas. Por ejemplo, podríamos intentar agregar algún margen a la parte inferior de cada enlace. Esto funciona pero también nota el margen extra en la parte inferior, que quizá no deseemos. Margin top causa el mismo problema, pero deja el espacio extra en la parte superior, que también puede no ser deseado. ¿ Y qué hay de usar el margen? ¿Por qué utilidad? Bueno, esto probablemente sea aún peor porque también agrega el espacio extra al principio y al final, y también se duplica el espacio entre cada enlace. utilidad de espacio Tailwinds resuelve estos problemas al agregar sólo una cantidad igual de espaciado entre cada elemento. Este ejemplo está espaciado verticalmente en el eje y, pero también podemos tener espacio en toda la página usando el espacio x. En lugar de usar múltiples clases y aplicarlas a cada uno de los enlaces, también podemos agregar un solo espacio entre clase y esto va por los padres. En nuestro caso, será la lista desordenada. Localicemos esto en otras listas. Apenas arriba en la parte superior, agrega la clase, agrega la utilidad espacial y como queremos el espacio en el eje y, agregamos el espacio y y el valor que es cuatro. Esto ahora nos da un agradable espacio igual entre cada uno de estos enlaces. Como se pueden imaginar, estaremos usando utilidades de espaciado muy regularmente. A continuación, veremos cómo podemos utilizar el CSS Flexbox con Tailwind. 9. Utilizar el CSS Flexbox: Este modelo alámbrico muestra que el cambio de diseño grande ocurre con la barra lateral y el contenido principal. Las pantallas pequeñas generalmente se apilan verticalmente y la vista de pantalla grande está de lado a lado. Una forma común de hacerlo es con el CSS Flexbox, y Tailwind también tiene clases de utilidad para hacer esto también. Las dos secciones que vamos a cambiar es la sección aparte, y también construyendo abajo junto a esta es la sección principal. Podemos ver que ambas secciones son elementos secundarios al cuerpo, así que vamos a aplicar el flexbox a esta sección. Vamos a poner una clase, y esto va a contener dos clases. El primero es flex y el segundo es flex-col. El primero o flex, esto aplicará el tipo de pantalla de flex y luego flex-col. Esto es lo mismo que establecer la dirección del flex para que sea columna, que necesitamos para el diseño de pantalla pequeña. Esto se aplicará al aparte en la sección principal. Ahora si guardamos esto dentro del navegador, no vemos mucho cambio por el momento. No vemos mucha diferencia, porque el contenido ya está dispuesto de esta manera, pero cambiaremos esto de flex-col a flex-row en un video posterior. Como mencioné en el video anterior, lo siguiente que hay que hacer para la vista en pantalla pequeña es colocar todo el contenido en el centro. Forma de hacerlo es ir a la sección de lado. Ya tiene la clase, por lo que solo agregaremos algunos adicionales al final. Nuevamente, haciendo uso del tipo de display de flex. Si guardamos esto, el valor predeterminado para el flexbox es flex-row. Por lo tanto, si vamos al navegador, podemos ver todo este contenido se coloca a través de la página. Al igual que arriba con la sección de cuerpo, también podemos voltear esto con flex-col y colocar el contenido como columnas. Al centro del texto, podemos usar text-center, y esto se aplicará a nuestro rubro y también a nuestros enlaces. El texto está centrado, pero también necesitamos centrar la imagen también. Dado que la imagen es padre, que es el aparte, actualmente está haciendo uso del flexbox. Si ahora bajamos a la imagen, también podemos usar una propiedad flex llamada auto-centro. Self-center es exactamente lo mismo que si tuviéramos nuestro propio archivo CSS y configuramos la imagen para que sea alinear-self center. Podemos ver esto si entramos en las herramientas de desarrollador, haga clic derecho e Inspeccionar. Coloquemos sobre los elementos de la imagen. Esto ha aplicado el valor alinear-self para ser centro. Esto ahora nos deja con más o menos donde necesitamos estar para la vista de pantalla pequeña y también con la sección aparte. Pasemos más abajo hacia el contenido principal. Se puede ver que tenemos un nombre de usuario, un avatar, el título Todos los productos, y luego dos botones para trabajar con los productos. Flexbox también será útil para este apartado. Puedo ir justo debajo de la sección a un lado, y echar un vistazo al elemento principal. Abre esto y podemos colocar nuestro nuevo contenido dentro. Para el avatar, necesitarás una foto tuya para incluirla en la carpeta de imágenes. Dentro de la mía, tengo una imagen llamada me.jpg. Si no tienes una imagen personal para usar para el avatar, en su lugar solo puedes usar una de estas imágenes de smoothie como portador de lugar. Ahora vamos a crear la sección de avatar la cual estará rodeada en un div. Este div contendrá la imagen del avatar. Saltando a la carpeta de imágenes, y la mencionada fue me.jpg, el texto alt. Entonces dentro de estas pequeñas etiquetas, vamos a colocar en ella el nombre del usuario. Pon esto, pulsa Guardar, y ahí está la imagen y también el texto justo debajo. Para que esta sección se parezca más a un 1,2, también necesitamos agregar algunas utilidades Tailwind. Para la envoltura dentro del div, pongamos algún margen en la parte superior de este elemento o cuatro. Esto nos dará algo de espaciado en la parte superior, y también podemos hacer uso del flexbox. Este flexbox hará que estos dos elementos aparezcan en una fila ya que la dirección de flex predeterminada es fila. Por supuesto, la imagen también es demasiado grande, por lo que podemos agregar la clase. Podemos volver a hacer uso de las utilidades de ancho y altura dentro de aquí, por lo que la altura, el valor de ocho, y también lo mismo para el ancho, igual que usamos para el número de pedidos. También podemos aplicar un borde redondeado a esta imagen. En el valor redondeado, puede agregar cualquier valor redondeado dentro de aquí. Yo sólo voy a mantener esto como lleno para agregar un círculo. Después de volver al padre, necesitamos alinear estos en el centro del contenido y también alinearlos verticalmente también. Dentro del div y justo después del flex, establece el contenido de justificación para ser centro. Esto colocará todos los contenidos en el centro de la sección. Entonces también necesitamos cuidar la alineación vertical. Podemos hacer esto mediante el uso de items-center. Esto colocará el texto en el centro de nuestra imagen. Por último sobre el texto, solo agregaremos una clase dentro de aquí, y esto será para establecer el color del texto. Vamos por gris-500, y también para dar algo de espacio desde la imagen, establezca el margen en el eje x para que sea un valor de cuatro. Bien. Bajando de esta sección de avatar, vamos a crear una nueva sección, que va a ser una envoltura principal para todo el resto del contenido. Dentro de la sección principal, y justo después del div final con nuevos elementos div, y este va a ser el contenedor para todos los contenidos incluyendo la tabla. Para mantener las cosas organizadas, solo colocaremos un comentario rápido justo arriba. Diremos contenedor para todo el contenido principal, incluyendo la tabla, y luego dentro de este div, coloque en un nuevo div dentro. Esto también va a ser un contenedor. También añadiremos un comentario en la parte superior. Este contenedor se utilizará para alinear el título Todos los productos junto a todos los botones. El comentario dirá contenedor para alinear los botones y el encabezado. En primer lugar, colocaremos el rumbo en el interior. Encabezamiento será un h2, y el texto de Todos los productos. Debajo de esto, un div que va a contener los botones. El primero, coloque un nuevo elemento de botón, y este será el texto de Agregar. A continuación, también necesitamos el icono Plus. Una vez más, podemos hacer uso de una entidad HTML. El símbolo más, podemos usar el ampersand, el hash, el valor de 43, un punto y coma, y luego esto agregará este icono más dentro del botón. Tenemos este título Todos los productos en la parte superior. Entonces este div tiene el primer botón de add. También a la par de esto, tenemos la opción selecta. Justo después del botón, coloque en nuestro selecto, y el selecto significa varias opciones. La primera opción va a ser la que primero vea el usuario, y ésta va a ser acciones Bulk. Duplicar esto. El segundo va a ser para Edit, y el final va a ser Eliminar un producto. Vamos a darle una oportunidad a esto. Vemos el desplegable y también nuestro botón Añadir junto a éste. Ahora volvamos a nuestro HTML y aplicamos algunas clases de utilidad para que esto se vea mejor. En primer lugar, el envoltorio de contenido principal, que es el que está en la parte superior, podemos agregar algo de espaciado a la izquierda y a la derecha con px-2. Después también para aplicar algo de espacio a esta sección de avatar, también podemos aplicar algún margen a la parte superior. Vayamos por ocho. A continuación, la envoltura div, que contiene el encabezado y también los botones. Para pedir algunas alineaciones a este apartado, podemos hacer uso del flexbox. Cambia la dirección para ser columna flex, y luego podemos empezar a alinear nuestro contenido, así items-center. Esto moverá todos los contenidos al centro de tu sección cuando tengamos la dirección establecida en columna. Para agregar un poco de espaciado entre estos, bajaremos al encabezado de nivel 2 y aplicaremos algún margen justo en la parte inferior del elemento con mb-4. Abajo hasta la última sección y podemos empezar a trabajar en nuestro botón y también en las entradas selectas. En primer lugar, el botón, esto tendrá el color del texto de gris-100. Este color gris claro no destaca demasiado bien en el color de fondo blanco, pero vamos a estar cambiando el color de fondo para que sea índigo, un tono de 500, y esto lo hace destacar. Además, un estado flotante volverá a cambiar el color de fondo para que sea un tono más claro de índigo. Vayamos por 400. Bien. También necesitamos algo de relleno en el interior de esto y también para redondear las esquinas. El relleno de la izquierda y la derecha, valor 4, encogerá el texto para ser de un tamaño pequeño. Entonces finalmente en los bordes redondeados. Bueno, esto se ve mucho mejor ahora y en adelante al selecto. Abajo a la etiqueta de apertura. El nombre y el ID realmente no importan al minuto porque no estamos enviando nuestro formulario a un servidor, pero solo estableceremos el nombre de bulk y también el id para que sea el mismo. las clases, para que coincida con nuestro botón, mantendremos el texto para que sea de tamaño pequeño. Aplica algún margen a la izquierda para dar esto espaciado del botón, un valor de relleno de cuatro en el eje x, y luego también estableceremos el borde para que esto destaque. Para aplicar un borde, sólo usamos la clase de utilidad de frontera. También podemos jugar con el color también. Como miramos antes con las utilidades de color, podemos usar el prefijo de borde, y luego usas cualquiera de nuestros colores que quieras. Vayamos por gris-300. Este el borde redondeado. Podemos hacer uso del estado de enfoque. Cuando este elemento esté en foco, vamos a eliminar el contorno y en su lugar reemplazarlo por un estado de enfoque, que incluye un borde índigo con el valor de 500. Si vamos al navegador, esto se ve mucho mejor ahora. Simplemente iniciaremos un pequeño espacio en él al eje y de estos elementos. Hagámoslo dentro del selecto. Al lado del relleno, agregaremos algo de relleno en el eje y. Probemos con un valor de dos. Bien. También haremos lo mismo por el botón. Esto ahora se ve mucho mejor. Tan solo para probar el enfoque si hacemos clic en el navegador, y luego usar el botón de pestaña para recorrer todos nuestros elementos. Una vez que llegamos a esta entrada selecta, podemos ver el contorno de enfoque, que hemos cambiado para ser el borde índigo, dando al usuario una indicación visual de qué elemento se selecciona. Ahora estamos haciendo buenos avances con el contenido y también con la vista en pantalla pequeña. A continuación vamos a empezar a trabajar dentro de nuestra mesa. 10. Tablas y desbordamiento: El wireframe para la pantalla pequeña sobre la derecha tiene una mesa en la que ahora vamos a trabajar. Las tablas de datos para este tipo de producto también podrían contener muchas más columnas también. Dado que el ancho de la pantalla en un dispositivo pequeño es limitado, en lugar de reducir el tamaño de esta mesa y tratar de apretar todo en una pantalla pequeña. Creo que lo mejor que puede hacer en este caso es permitir que el usuario deslice hacia la derecha para ver el resto de los datos de la tabla. En el video anterior, agregamos este comentario en la parte superior alrededor de este div, que era el contenedor principal. Esto contiene todo el contenido que creamos y también la tabla. Lo que tenemos que hacer es localizar la etiqueta de cierre, que está justo por encima de la principal, y mantener esta sección de tabla dentro. Para ello, crea una nueva sección y luego dentro de nuestra mesa. El motivo por el que hemos agregado esta sección circundante alrededor nuestra mesa es para agregar una clase de desbordamiento. Veremos el resultado a esto en tan solo un segundo si agregamos la clase sobre la utilidad de desbordamiento dash x, dash auto. Esta utilidad es la misma que la propiedad regular de desbordamiento de CSS x. Hemos establecido el valor a auto. Esto significa que si el contenido es demasiado ancho para la pantalla, que será el caso para nuestra mesa, en lugar de ocultar la mesa o cortarla, entonces se introducirá una barra de desplazamiento. Dentro de la mesa, añadir nuestro primer elemento que es t-head. Este va a ser el envoltorio para todos nuestros encabezados de mesa colocar en una clase de bg-gris-100. Entonces dentro de aquí agregamos nuestra primera fila. Con las tablas, utilizamos el tr para fila de tabla. Entonces cada uno de los encabezamientos estará rodeado en el elemento th. El primero, si recuerdas de mi alambrada, es el artículo. El segundo, el estado del artículo y el tercero es para la categoría, el nivel de existencias, el precio. Entonces por fin un botón Editar. Guardemos esto y veamos qué sucede dentro del navegador. Voy a configurar el servidor en vivo para abrir, actualizar los cambios. Ahí está nuestro encabezado de tabla a través de la página. Como era de esperar, necesitamos agregar algunas clases de utilidad, hacer que esto se vea mucho mejor. Para los elementos th, para los encabezamientos, colocar en la clase. En primer lugar, algún relleno en el eje x seis. Necesito textos sobre la izquierda. También podemos hacer que el texto sea extra pequeño o mediano para que este destaque y un poco más audaz. Después un color para el texto, que va a ser gris 500 y girar esto para que sea mayúscula. Entonces al final vamos a añadir una clase de utilidad más, que va a estar rastreando más amplio. Si miras de cerca el elemento antes de guardar esto, pulsa “Guardar”. Esto aumentará el espaciado entre letras. Con éste ahora en su lugar, copiaremos el atributo de clase completo y al menos cada uno de nuestros encabezados de tabla. El segundo, la categoría, la acción, el precio, y finalmente la sección de edición. Si recuerdas del alambres, la primera celda de la izquierda también tiene una casilla de verificación para seleccionar todos nuestros artículos. Esto va a ser dentro del encabezamiento de la primera mesa. Justo antes del texto del elemento, colóquelo en la entrada. El input es el tipo de casilla de verificación y también para darle algún espacio en ella al texto que está justo al lado. También podemos agregar la clase para darle algún margen a la derecha y el valor de cuatro. Lo que ahora tenemos es un encabezamiento de mesa con dos piezas de información. Tenemos los insumos y también el texto. También necesitamos hacer algunas alineaciones, hacer que esto aparezca uno al lado del otro dentro de la celda. Podemos agregar algo de relleno y alineación a la sección. Yo sólo voy a hacer más en la clase. Agregaremos un poco de relleno en el eje y. El valor de cuatro sólo nos da un poco más de espacio vertical en. Ahora necesitamos encontrar una manera de colocar la casilla de verificación junto a nuestro texto de elemento. Bueno, podemos hacerlo cambiando el encabezado de la tabla para hacer uso del flexbox. Recuerda por defecto el flexbox tiene la dirección flex de fila. Esto significa que ambos elementos infantiles se colocarán uno al lado del otro en una fila, dejando nuestra sección de cabeza ahora completada y nuestra mesa ahora lista para agregar algunos datos en el próximo video. 11. Cuerpo de tabla y divisiones: Bajando de la sección del cabezal de mesa y hacia el cuerpo donde podemos tener cada línea de productos. También puede agregar tantos de estos productos como le gustaría. Pasado al editor, y podemos empezar a agregar la sección. En la última sección, creamos el encabezado de la tabla. Si localizamos la etiqueta de cierre para estos elementos, podemos llegar a trabajar en la sección del cuerpo. Justo debajo de la cabeza, añadir en el tbody. Después coloque dentro de una clase que nos dará el color de fondo blanco. Dentro de la primera fila con los elementos tr, la primera pieza de datos de tabla contiene tres cosas. Contiene una casilla de verificación, por lo que agrega las entradas con el tipo de casilla de verificación. Esto se va a sentar justo debajo de éste de aquí. Junto a nuestra casilla de verificación, añadiremos los elementos de imagen, y el elemento de imagen va a ser la imagen, que queremos colocar junto a cada batido. Por último, el elemento p, y vamos por el batido de mangos. Oops, esto está justo encima de la mesa. En realidad necesitamos cortar todo este lugar, y colocarlos dentro de una celda que es td, los datos de la tabla. Coloque esto está en. Ahora deberían arreglar nuestro tema. La celda también necesita algunas clases para hacer que estas se alineen correctamente, por lo que ya que queremos que los tres elementos pasen por la página, podemos volver a hacer uso del flexbox, y luego también alinearlos verticalmente usando item-center. Algún relleno en el eje x, y vamos a ir por valor de seis, y también relleno y de cuatro. El checkbox está bien como está, y nos moveremos hacia abajo a la imagen y saltaremos a la carpeta de imágenes. Tenemos una imagen dentro de aquí, que es el mango.jpg, y esta es la imagen que voy a colocar junto a este ítem, el texto alt del batido de mangos, y también algunas clases a estos elementos. Para nuestra imagen, necesitamos hacerla un poco más pequeña, por lo que podemos hacer esto con h-10 para la altura, y también lo mismo para el ancho también para mantener esto igual. Entonces si miramos nuestra imagen dentro del navegador, también necesitamos algo de espaciado a ambos lados. Podríamos hacer esto con la propiedad de margen en el eje x y un valor de cuatro. A continuación en nuestros textos, también añadiremos algunas clases a los elementos p. En primer lugar, hacemos que el texto sea un tamaño pequeño, el font-weight de medium, el color del texto de gris 800. Pero basémonos en usar también la utilidad más amplia de rastreo que miramos antes, y luego una clase que no hemos utilizado hasta ahora, que es whitespace-nowrap. Ya verás, en cuanto guardemos esto, el texto del batido de mangos aparecerá en la misma línea. Esto significa que detiene el ajuste del texto en una nueva línea si es demasiado largo para la celda real. El siguiente dato está justo por debajo del estatus. Esta va a ser una etiqueta activa verde. Vamos justo debajo de nuestro td, agregamos una nueva pieza de datos de tabla. También necesitamos agregar algunas clases a esta sección. No vamos a espejar las clases desde la primera, porque recuerden, esto necesitaba hacer uso del flexbox para alinear los tres ítems dentro, así que volvamos a bajar, y podemos sumar nuestras clases. Este va a ser text-left, text-small, solo mantenerlo consistente, algún relleno a la izquierda y a la derecha de seis, tracking-width, y también whitespace-nowrap. Dentro de la celda, agregue un elemento span con el texto de activo. Para que esto parezca más un botón, vamos a entrar en los elementos span y añadir algunas clases. En primer lugar, cambiaremos el color del texto para que sea verde, sombra de 900, y luego compensaremos esto con un fondo más claro. Esto también es verde, pero el valor de 100, un valor de relleno de cuatro en x, y luego para y, valor de dos. Después alrededor de los bordes, lo redondeamos como lleno. Eso se ve bien. También si hacemos que el navegador sea más pequeño que el ancho real de la tabla, notarás una barra de desplazamiento en la parte inferior. Como se mencionó, esta es la barra de desplazamiento para hacer que todo el contenido entre en juego. Tenemos esto porque si vamos al inicio de nuestra mesa. Vamos a desplazarnos hacia arriba. Recuerda agregamos un envoltorio de sección alrededor de esto, que tiene la clase de desbordamiento-x-auto. Siguiente sección, tendremos es la categoría, así que retrocede. Justo debajo de la última pieza de datos de tabla, agregue una nueva celda. A partir de aquí, podemos empezar a mantener el estilo más consistente. Podemos agarrar las clases de los datos de la última tabla. Pega estos en. Entonces entre las etiquetas, podemos añadir el texto de los batidos. Esta es una bastante sencilla. Simplemente contiene el texto en su interior. Ahora vamos al otro lado y agregamos la sección para este doc. Mantener un consistente, copia los elementos td completos desde arriba, pega esto abajo, y luego inserta un a dentro de aquí ya que no estamos rastreando los niveles de tallo para estos batidos. ¿ Qué sigue? Vamos a cruzar y echar un vistazo. Este es el precio basado en un nuevo td elementos con las mismas clases. Añade un precio por nuestro batido. Entonces finalmente, sobre la derecha justo debajo de la sección de edición, este va a ser un botón de edición. Esto también puede hacer uso de las mismas clases así que pega en un td. Pero esta vez esto también necesita un enlace. Ya que no tenemos páginas a las que enlazar, solo podemos dejar el href vacío. Pero sí necesitamos agregar algunas clases para peinar el texto de las ediciones. Después de volver a nuestras clases, podemos empezar a agregar un color de texto diferente, texto índigo 500, y también un tono más oscuro una vez que uses un hovers sobre esta sección. Texto índigo, y esta vez iremos por un valor de 900. Bien. Todo esto está funcionando, y este es nuestro primer artículo. Ahora puedes seguir adelante y agregar tantos artículos como quieras. Contamos con múltiples imágenes suministradas en la carpeta de imágenes. Si quisieras practicar, podrías teclear de nuevo toda esta sección, o bien podrías copiar y pegar esta sección de fila completa y luego cambiar los detalles dentro. La forma más fácil de hacer esto, si vamos a la sección de cuerpo de la mesa que acabamos de crear. Entonces dentro, necesitamos copiar directamente esta fila de tabla, así que copia todo el contenido, la etiqueta de fila de tabla de cierre. Copia esto. Justo debajo, hay uno nuevo justo dentro, y vamos a pasar por esto una vez más. Este va a ser para el batido de fresa. Echa un vistazo. En lugar de mango, cambiaremos esto para que sea fresa. El botón activo está bien. Esto aún necesita pasar a su categoría. Puedes cambiar el precio si quieres, pero solo voy a dejar esto como está. Todo lo que necesitamos hacer ahora es solo cambiar esta imagen, así que desplázate hacia arriba. Esta vez, queremos cambiar la fuente de la imagen para que sea el strawberry.jpg, y también cambiar el texto antiguo también. No vamos a hacer que este video sea realmente largo y pasar por todas estas opciones, pero ahora puedes seguir adelante y agregar tantas de estas como quieras, y hacer uso de las imágenes dentro de la carpeta. Pero justo antes de terminar este video, también podemos agregar una línea divisoria entre cada uno de nuestros artículos. Podemos hacerlo si localizamos la sección de mesa-cuerpo, que creamos al inicio de este video junto al fondo, agregamos una clase que está dividida y. Enseguida, cuando guardamos esto, vemos que la línea se está colocando entre cada uno de estos ítems. También podemos cambiar el color de esta división. Todo lo que necesitamos hacer es usar el prefijo divide y luego agregar cualquier color. Voy a usar gris-200. Esta división es realmente útil para agregar una línea divisoria entre cada uno de los elementos secundarios dentro de aquí. Como se puede ver, podemos hacer uso de las divisiones horizontales o verticales usando y o x Una cosa útil de esta división, es que sólo agregará una línea entre cada uno de los elementos. No agregaría una línea al principio ni al final, lo cual pasaría si usamos algo así como un fondo de borde. Si también quisiéramos una línea divisoria entre el cabezal de la mesa y el cuerpo de la mesa, también podríamos agregar lo mismo a las clases de utilidad, pero esta vez al elemento padre. Ahora en este caso, el padre es la tabla, así que copia ambas utilidades. los padres nuestra cabeza y nuestra sección de cuerpo es la mesa. Voy a localizar esto en los atributos de clase, y luego podemos pegar en nuestras utilidades. Después de otro lado a la derecha, ahora podemos ver esta utilidad se coloca la división entre la cabeza y la sección del cuerpo. Bien, estamos llegando a algún lugar ahora. Solo hay un poco más de contenido para agregar justo debajo de esta tabla. No podemos seguir añadiendo más productos si quieres. Entonces una vez terminado, los veré en el próximo video. 12. Sección de paginación: El último fragmento de contenido en esta vista móvil sobre la derecha va a ser la pequeña sección hacia abajo en la parte inferior. Tenemos algún texto el cual es decir cuántos productos estamos mostrando, cuántos productos tenemos en total, y también la sección para voltear entre cada una de estas páginas. En la vista de pantalla pequeña, esto se apila verticalmente, por lo que tenemos el texto en la parte superior y luego la paginación en la parte inferior. Tenemos que insertar esta sección hacia abajo en la parte inferior, así que si echamos un vistazo a la etiqueta principal de cierre y luego justo por encima de este div final. Podemos entonces colocar en una nueva sección para todo este contenido, empezando por los elementos p, que es el texto. Diremos, mostrando 10 de 108 productos. Recuerda, esto es completamente ficticio, por lo que puedes cambiar los números. A continuación, la lista desordenada, nuestro primer elemento de lista, y luego cada página se puede insertar como enlace. No tenemos páginas a las que enlazar, por lo que podemos mantener esto vacío, y la primera es el número 1. Copiemos esto y peguemos esto para crear cuatro enlaces diferentes. En la página número 2, página 3, y también 4. Guardar. Ahí está todo el contenido abajo. Recuerda desde el alambrado que está a la izquierda de este número 1, tenemos el corchete de ángulo izquierdo, y luego a la derecha del número 4, tenemos el corchete de ángulo recto. Lo que vamos a hacer para insertar estos es incluir un lapso. Insertaremos esto dentro de los elementos de lista y justo por encima del número 1. Podemos insertar esto con una entidad HTML, usar ampersand LT, y un punto y coma. Para darle a esto algo de espacio en ella a nuestro número 1, también agregue la clase, que es margin-derecho, y el valor antes. Bajemos al último ítem de la lista. Este va a ir tras nuestro número 4. El lapso, la entidad esta vez es el ampersand y GT mayor que, el punto y coma. Esto también tendrá algún margen. Pero esta vez, necesitamos colocarlo a la izquierda. Ahora vamos a trabajar en el diseño de esta sección, y si empezamos en la envoltura principal, podemos hacer uso del flex-box. Controla esto en la vista de pantalla pequeña y grande. Para la pantalla pequeña, como la mayoría del contenido, esto se colocará como columnas. Los artículos estarán en el centro. Agrega algo de espaciado en la parte superior e inferior en el relleno y valor de seis. Un texto será un poco más pequeño, por lo que usamos Text-SM, y también un peso más ligero también. El texto justo debajo está bien, por lo que pasaremos a la lista desordenada y los números deben colocarse en toda la página. Esto también hará uso del flexbox. El flex-dirección predeterminada es fila, que los coloca en toda la página. Agregaremos algo de espacio al texto anterior con mt-4. No queda mucho más por hacer para esta sección, solo le agregaremos algo de espacio a estos números. Lo haremos dentro de los a-elementos y de la clase de p-2. También podemos copiar esto y añadirlo a cada uno de nuestros números. Bien, así que justo como toque final para esta sección, vamos a destacar esto en el número 1. Esto es solo para que el usuario sepa exactamente en qué página estarán. Como siempre lo hará es agregándole algunas utilidades. En primer lugar, cambiaremos el color del texto para que sea gris, un tono de 100, el fondo sería bg-indigo-500. Los efectos flotantes también haremos de esto un color índigo. Bueno, al igual que hicimos con el botón de edición, este será un tono ligeramente diferente. El estado de flotar para este elemento, el fondo, indigo-400, y correr por los bordes con redondeado-completo. Bien. Esta es la sección final que voy a completar y también todo el contenido que necesitamos para este proyecto. futuro, lo que vamos a hacer es hacer que este contenido sea más adecuado para pantallas más grandes, y también aprender sobre más de las características que Tailwind tiene para ofrecer. Sólo unas cositas sin embargo, antes de seguir adelante, empezando por el fondo de esta sección principal, localicemos la etiqueta principal de apertura, que está cerca de la parte superior del cuerpo. Ese es este lado y el apartado principal. Lugar en una clase, que va a ser bg-gris-200. Podríamos mantenerlo simple así si quisiéramos y añadir un solo tono de gris o de cualquier otro color. O, si quisiéramos, también podríamos configurar esto como un gradiente. Los gradientes están disponibles en CSS regular y nos permiten fusionar entre dos o más colores diferentes. Se puede ir extremo y mezclarse entre dos colores opuestos, pero voy a mantener las cosas bonitas y sutiles y cambiar entre dos tonos similares. El modo en que podríamos hacerlo, en lugar del color gris, es establecer el fondo para que sea un gradiente, seguido de la dirección del gradiente. El mío va a ser to-r. Esto cambiará de color de izquierda a derecha. Si también quisieras, también podrías cambiar esto para que sea la parte superior, la inferior o la izquierda, un largo camino para combinarlas también. Por ejemplo, tr sería la parte superior derecha, y tl sería la parte superior izquierda con un espacio entre. Después utilizamos, el para y desde para establecer los colores que desea utilizar. Para hacerlos visibles todos, vamos a añadir un valor rojo y azul para empezar. Diremos desde rojo-200, y luego iremos a un valor azul de 100. Esto ahora lo hace más visible. Tenemos el color rojo, que empezamos de más a la izquierda, y luego nos movemos hacia la dirección correcta y transformamos este para que sea el color azul, que vemos aquí. Pero como se mencionó, voy a mantener esto un poco más sutil y cambiar ambas para que sean grises. Pero no dudes en jugar con cualquiera de estos colores o cualquier otra pieza de estilo en la que quieras. Continuando, también necesitamos agregar algo de espacio en justo encima de esta mesa. Si nos desplazamos un poco hacia abajo, podemos ver que tenemos el contenedor que creamos antes, y esto se utiliza para envolver nuestros botones. Agrega algo de espaciado, podemos agregar algún margen en la parte inferior de esta sección con un valor de seis. Para redondear este video, igual que hemos hecho con este número 1 en la parte inferior, los aspectos más destacados del usuario en el que estamos, página 1. También vamos a destacar el enlace del producto en la parte superior. Esto se debe a que estamos en la página de todos los productos, por lo que tiene sentido hacerle saber al usuario qué página está activa. Ponga esto de nuevo al editor y desplácese hacia arriba por el enlace del producto en la parte superior. Entonces, dentro de las clases, comenzaremos agregando el fondo para ser gris-500. Esto ahora permite al usuario saber que la página del producto ahora está activa. Ya está completa la configuración de la pantalla pequeña. A continuación, aprenderás más sobre lo que Tailwind tiene para ofrecer, incluido el diseño responsive. 13. Cambiar el diseño con puntos de interrupción: El diseño responsive no es sólo una cosa agradable de tener en los sitios web de hoy en día. Es una parte esencial del desarrollo. Tenemos que asegurarnos de que nuestro diseño se vea bien en pantallas pequeñas, justo a un tamaño de escritorio grande. Por suerte, ya que hay miles de tamaños de pantalla diferentes por ahí, no necesitamos crear un diseño separado para cada uno de estos tamaños. Lo que en cambio, sí necesitamos aplicar algunas reglas sensatas para cubrir es para todos los tamaños de pantalla. Sin CSS regular, tenemos acceso a consultas de medios. Un uso común para las consultas de medios es separar ciertos estilos para aplicar solo a ciertos tamaños de pantalla. Y Tailwind también tiene utilidades incorporadas para estos dos. Algo importante a entender es que todas las clases de utilidades ya hemos aplicado se aplicarán a cada tamaño de pantalla. Se puede pensar en estos como estilos básicos generales. Construyendo encima de estos. Después podemos añadir estilos específicos para ciertos tamaños de pantalla. Al mirar esta fila superior, por ejemplo, ten en cuenta que todos los estilos actuales que tenemos están aplicando a todos los tamaños. Entonces una vez que un navegador golpea un ancho de 640 píxeles o superior, podemos agregar nuevos estilos o anular los que ya tenemos. Quizás queremos una fuente más grande, más espaciado, o un cambio completo de diseño. Para que se apliquen estos cambios, utilizamos las mismas clases de utilidad que antes, pero con el prefijo SM. Ya que estamos trabajando con mobile-first, estos estilos se aplicarán todo el camino hasta pantallas más grandes también. A menos que nuevamente los anulemos usando otro prefijo, como LG para pantallas grandes. Cada uno de estos tamaños de navegador se llama punto de ruptura. Dado que este es el punto podríamos cambiar el estilo o el diseño. Ya sabemos por este amplio marco cómo se verá la vista de pantalla más grande. ¿ Cómo decidimos cuándo cambiar el diseño? Bueno, esto es algo que sí necesitas juzgar por ti mismo dependiendo de cada proyecto, pero una regla simple es comenzar con una pantalla pequeña y luego escalar el navegador hacia arriba y hacer cambios cuando el diseño comience a parecer demasiado estirado o roto. Por simplicidad, solo voy a lidiar con un solo cambio de punto de corte, que va a ser al tamaño grande , como tú quieras. Sus diseños básicamente pasarán de tener contenido apilado verticalmente, estamos teniendo nuestras dos secciones principales lado a lado. Pasando desde esta pequeña vista de pantalla, voy a hacer un poco más de espacio, y si entramos en las herramientas de desarrollador con “Clic derecho” e “Inspect”. Si comienzas a hacer que el navegador sea grande o pequeño dentro de las DevTools, verás en la esquina superior derecha, podemos ver qué ancho es en píxeles. Actualmente, el diseño se ve bastante bien, cuando estamos alrededor de 600 píxeles. Si somos hasta 700s, 800s, todo aún queda bien en una vista de pantalla suave de tableta. No obstante, si empezamos a llegar tal vez alrededor de 1,000 píxeles o más, algunos por aquí, podemos ver, empezamos a necesitar un cambio de diseño. Es este tamaño de pantalla grande el cual es de 1,024 píxeles, que voy a usar para crear un cambio de diseño. Vamos a cerrar esto. Si entramos en el código, en nuestra página de índice, y recordamos la sección de cuerpo arriba en la parte superior controla el diseño de nuestras dos secciones principales. Este es el patrón para ambos lados, que es esta zona superior y también el contenido principal también. Controla esto usando el flex-box y configurarlos actualmente, a un diseño de columna se convertirá en cambios para ser una fila en pantallas más grandes. El modo de hacerlo es usar el prefijo de punto de ruptura y en mi caso, es con una vista de pantalla grande. Entonces todo lo que necesitamos hacer es agregar nuestra clase de utilidad. Esto cambiará esto para ser fila flex y si guardamos esto, refresca el navegador, estas dos secciones y se colocan en una fila. También podemos ver que el punto de ruptura se lleva a cabo si reducimos el navegador hasta el tamaño más pequeño. Esto luego hará que esto vuelva al diseño estilo columna. Lo que ahora tenemos que hacer es dimensionar nuestras dos secciones, ya que esto no abarca todo el ancho de la página. Para dimensionar el lado, y las secciones principales. Vamos a hacer uso de la propiedad width. Sabemos que podemos establecer qué tan anchas son estas secciones en rems, o una opción aún mejor para estas secciones es usar fracciones. Lo que tenemos que hacer es ubicar primero al lado. Entonces podemos establecer para la vista de pantalla grande, un ancho igual a 1/4. Bajen. Localicemos la sección principal. Después de esto, también apuntando a las vistas de pantalla grande. Esto llenará los 3/4 adicionales de espacio. Ahora 3/4 y 1/4. Vayamos a vivir dentro del navegador. No necesitamos seguir refrescando. Podemos ver que esto ocupa 1/4 del espacio de pantalla, y este lado ocupa el valor restante. Esto también se estirará si hacemos que el navegador sea más ancho o más pequeño para estar siempre en proporción. Ahora sabemos que estamos trabajando con la pantalla de escritorio de tamaño completo. Sería mejor en esta vista si todo el contenido se estira verticalmente a la altura completa de la pantalla. Podemos hacer esto si vamos a ustedes una de las secciones como el de un lado y de vuelta a las clases. Nuevamente, esto siempre estará apuntando a la vista de pantalla grande. Podemos establecer la altura para que sea igual a la altura de la pantalla. Esto establecerá la altura en 100vh, que es la altura completa de la ventanilla. Esto se ve mucho mejor. Ahora tenemos una barra lateral de altura completa. También ya que la sección principal es de lado largo también se sigue la altura completa también. En cuanto al cambio de diseño principal principal, puedes agregar más puntos de rotura si quieres. A continuación, nos vamos a centrar en el contenido dentro de estas dos secciones. 14. Estilo de pantalla grande: El marco y muestra en la pantalla grande que en la sección de barra lateral, los enlaces están alineados con el lado izquierdo. Vamos a empezar ahí, luego avanzar hacia abajo por el resto de los estilos de pantalla más grande. Como sabemos, estos enlaces se encuentran dentro de la sección UL entre el contenido asignado. Vamos a ubicar. Mucho en otra lista. Ya tenemos el atributo de clase en su lugar. Todo lo que necesitamos hacer es comenzar con nuestro estilo de pantalla grande. El pequeño pantalla, ya tenemos algo de espacio en el eje y entre cada uno de nuestros ítems de la lista. Ahora tendremos más espacio disponible. Voy a subir esto para ser un valor mayor. Espacio y, el valor de ocho. El texto se va a dejar alineado como acabamos de ver en el marco y. Ahora, tengo algo más de espacio entre cada uno de estos artículos. También podemos agregar un poco de margen en la parte superior e inferior. Dame algo de espacio del título en este ícono. Lo haremos con un margen en el eje Y y y un valor consistente de ocho. Esto es mejor, pero también necesitamos alinear el icono de configuración. Bajemos a nuestro lapso que envuelve esta sección que está abajo en la parte inferior a la lista desordenada dentro de las clases o sólo a la pantalla grande. Estableceremos el text-align para que quede a la izquierda. Bien. Esto está alineado hacia el lado izquierdo, pero si miras de cerca, esto queda un poco más a la izquierda que el texto real. Esto también necesita algo de relleno a las películas en línea con el resto del enlace justo arriba. Para esto, agregaremos un valor de relleno izquierdo de dos. Manteniendo esto ahora en línea con el resto de los enlaces anteriores. Creo que la barra lateral se ve bastante bien. Esto es todo lo que quiere hacer para este apartado. Ahora, pasemos al contenido principal de a la derecha. Ya que tenemos más espacio disponible, empecemos con algo de relleno alrededor de esta sección todo. Esta sección completa es la sección principal, así que vamos a entrar en los clústeres aquí y cambiar las pantallas grandes con un relleno de un valor de cuatro. Esto se ve un poco mejor. Lo siguiente que hay que hacer es mover el avatar hacia la esquina superior derecha. Todo el avatar del usuario y también el nombre para estar en la esquina. También el editor, podemos buscar esta sección. Tenemos que ir justo dentro de la sección principal. Este es el primer div en la parte superior. No hay mucho que ver con esta sección porque ya tenemos la propiedad flex establecida para esta sección. Todo lo que necesitamos hacer es anular el diseño para la vista de pantalla grande. Podemos hacerlo agregando justify-end. Pasemos esto a la esquina superior derecha. Este es el equivalente de certeza justificar la propiedad de contenido para ser igual a flex-end. Bajando, tenemos el título All Products y también los botones que voy a colocar uno al lado del otro en la misma línea. Apenas un poco más abajo. Ten nuestro título en este contenedor para los botones. Esta es la sección div circundante justo aquí. Como dijimos con los comentarios anteriores, este es el contenedor a la línea, los botones y también el encabezado. Añadamos algunas clases dentro de aquí. El prefijo grande encendido y como ya hace uso del flex box y la columna flex, todo lo que necesitamos hacer es hacer que esto sea igual a la fila flex. Coloquemos ahora a estos dos elementos en la misma fila. Pero si miras de cerca, el rubro es un poco más alto de lo que debería ser. Esto es por algún relleno que tenemos en la parte inferior desde la vista de pantalla pequeña. Por este lugar ordenado en una anulación. Este es el margen original en la parte inferior que tenemos aquí. Tenemos que mover esto para la vista de pantalla grande configurando esto para que sea igual a cero. Guardar. Esto arregla las alineaciones, y también ahora, tenemos un poco más de espacio en pantalla disponible. Podemos hacer el texto un poco más grande. El texto. Vamos por extra grande. Bien. Por último, el espaciado entre estas dos secciones. Dado que también estamos usando este flexbox para esta sección, estamos colocando el valor de justify entre. Prácticamente conseguí la sección superior donde quería estar. El siguiente punto de nuestra lista es esta tabla. La mesa no está muy lejos de donde necesitamos que esté. No obstante, sin embargo, sería bueno tener ancho completo de la pantalla. Vamos a nuestra sección de mesa, que está justo aquí, y Tailwind nos proporciona una clase llamada min-w-full. Haga de este el ancho mínimo de la pantalla. Si quisieras, también podríamos colocar esto detrás de la gran consulta de medios. Pero como siempre necesita haber el ancho mínimo de la pantalla en todos los tamaños de pantalla, esto se ve bien en la vista de pantalla pequeña y grande. Ya casi estamos ahí. El apartado final es este número de productos y los enlaces en la parte inferior. Todo lo que voy a hacer para esta sección es colocar ambos ítems en la misma fila. Dirígete al fondo del proyecto. Esta es la sección de envoltura. Al igual que algunas otras secciones, ya que es también utiliza el flexbox y la dirección flex de columna, podemos cambiar esto para que sea la dirección flex de fila. Pasemos a la misma sección, pero aún necesitamos agregar algo de espaciado entre estos dos ítems. Además, elimine parte del margen por defecto que tenemos en la parte superior de nuestros enlaces. En primer lugar, nos ocuparemos del margen en la parte superior de nuestra lista desordenada, que está justo aquí. Podemos anular esto. Para ser el margen top zero para la vista grande, es decir, todo lo que tenemos que hacer ahora es justificar el espacio para estar en medio de ambos elementos. Hacemos esto en el envoltorio. Al final, justo después de configurar la flex-row en la utilidad de pantalla grande de justify between, y así es ahora exactamente como lo queremos. Todo esto ahora se hace para la vista de pantalla grande. puede ver lo fácil que es cambiar un diseño y un contenido con solo unas pocas anulaciones. 15. Utilizar CSS personalizado y directivas: You Tailwind clases de utilidad nos tiene cubiertos para la mayoría de los casos de uso. Esto es bastante flexible porque generalmente, una clase de utilidad Tailwind es igual a una propiedad CSS. ¿ Y si también quisiéramos sumar los nuestros también? Esto también es completamente posible. Podemos hacerlo creando nuestras propias hojas de estilo. Al proyecto y abre la barra lateral. Entonces junto a nuestra página de Índice, crea un nuevo archivo. Este es el custom.css. Asegúrate de que esto esté al lado del resto de archivos y carpetas. Entonces dentro de aquí podemos agregar cualquier clase como ejemplo. Llamemos a esto la costumbre que establecerá el color para que sea naranja. Este es simplemente CSS regular como normalmente escribiríamos cuando no estábamos usando Tailwind, y esto establecerá el color del texto para que sea naranja. Entonces al igual que un proyecto normal de HTML y CSS, podemos incluir esto en la sección de cabecera con un enlace. Basta con soplar nuestro archivo CSS Tailwind, añadir en un nuevo enlace. El href es solo el custom.css Esto ahora debería ser nuestro enlace de archivo y podemos probar esto. Vamos por nuestro encabezado de nivel uno y sumamos la clase de costumbre. Dale a esto un guardado y más al navegador. Ahora podemos ver al instante que esta clase naranja personalizada se ha aplicado a nuestro texto. Esto funciona y si lo quisieras, podrías incluir múltiples hojas de estilo en un proyecto. En ocasiones ciertos plug-ins o bibliotecas tienen su propia hoja de estilos la cual debes agregar y puedes hacerlo de esta manera exacta. O si quisieras, en lugar de tener nuestros archivos separados en el archivo CSS de su cliente, podríamos fusionar estos estilos personalizados en el archivo Tailwind. Podemos hacerlo con un comando terminal. Si aún no tienes una terminal abierta, ve a terminal y luego nueva terminal dentro de un código de Visual Studio. Entonces a partir de aquí, vamos a aprender un comando Tailwind, que es npx tailwindcss. Recuerda que utilizamos cualquier CLI de viento de cola para esto. Lo que tenemos que hacer a continuación es -i y luego colocar en él la ruta del archivo para dos hojas de estilo diferentes. El primero va a ser. /, y este es el custom.css. Esto apunta a nuestro archivo CSS personalizado que acabamos de crear. Después usamos -o, seguido de la ruta del archivo a nuestro CSS Tailwind. De qué va a hacer esto, esto fusionará nuestro archivo personalizado en el archivo Tailwind así que pulsa “Enter” y podemos ejecutar este comando dentro de la terminal. Localice esto. Fuera a nuestro archivo personalizado y aún podemos ver que nuestra clase personalizada está en su lugar. No obstante, si vamos a nuestro archivo tailwind.css en lugar de todas las miles de clases que teníamos antes, todo esto se está eliminando por completo y reemplazando con nuestro CSS personalizado. También podemos ver esto si vamos al navegador también, no tenemos ninguno de los estilos Tailwind. Simplemente tenemos nuestro color naranja personalizado para el rubro. Obviamente, esto no está bien. Necesitamos una forma de fusionar nuestros estilos personalizados con las clases originales de Tailwind. Lo que tenemos que hacer es ir a nuestro archivo CSS personalizado, y luego otro top necesitamos importar Tailwind. Para importar Tailwind tenemos varias directivas Tailwind, todas las cuales comienzan con el símbolo at. Tenemos @tailwind, seguido de qué parte de Tailwind queremos importar. El viento de cola está organizado en diferentes secciones. Recuerda que antes dijimos que Tailwind tiene un conjunto de estilos base, que incluye cosas como reinicios y estilos para hacer que nuestro sitio luzca más consistente en diferentes navegadores. Bueno, para empezar, podemos importar estos estilos base con base. Después de esto, también incluiremos la misma directiva Tailwind, pero esta vez vamos a importar los componentes. Veremos los componentes muy pronto, pero a continuación, iremos por las utilidades, la misma directiva Tailwind, e importaremos las clases de utilidades. Por último, podemos importar las pantallas. Pantallas son las utilidades adicionales de Tailwind que comienzan con estos prefijos de pantalla. Por ejemplo, si tuviéramos un prefijo empiezan por SM para las pantallas pequeñas, o LG para las pantallas grandes. La directiva Pantallas es opcional. Si dejamos esto fuera, se añadirá automáticamente al final del archivo. Realmente solo necesitamos incluir esto si tuviéramos un caso de uso para reordenar este CSS. Ahora si volvemos a la Terminal y ejecutamos este mismo comando, presionamos “Arriba”, se ingresa para ejecutar esto y luego en nuestro archivo CSS Tailwind, y luego hasta el fondo de este archivo y vemos nuestro CSS personalizado abajo en la parte inferior. Sólo hay 800 líneas así que me he imaginado que tenemos un problema justo aquí dentro. Al ser nuestro estilo personalizado al final, tenemos las pantallas, estas solo deberían ser utilidades. Guarda esto y como cometí un error ortográfico, también necesito volver a ejecutar este comando en la terminal. Esto se hace. Volvamos a nuestro expediente Tailwind. Se puede ver que tenemos mucho más estilos que ahora están más en línea con el archivo Tailwind original. Hasta el fondo de este archivo está nuestra clase personalizada colocada al final. Esto se ha agregado en el mismo orden en que has agregado todos estos en nuestro archivo personalizado. Después de volver al navegador y ahora se han vuelto a aplicar los estilos Tailwind. También podemos eliminar nuestro archivo CSS personalizado, guardarlos de nuevo en el navegador y nuestro color naranja seguirá aplicándose porque no se está fusionando con nuestro CSS Tailwind. Es así como podemos crear nuestras propias hojas de estilo personalizadas e incluirlas con Tailwind. A continuación, descubriremos más directivas, ayudaremos a organizar nuestros estilos. 16. Las directivas @layer y @apply: Anteriormente en el archivo generado por Tailwind. Abajo en la parte inferior, agregamos nuestra propia clase personalizada que se construye. Todo esto funciona completamente bien y está bien para muchos casos de uso pero estamos empezando a meternos con el orden de los grupos de viento de cola creados por los católicos. Dentro de nuestro archivo personalizado aquí, tenemos todos estos grupos de viento de cola justo aquí. El CSS Tailwind se genera en el [inaudible] reemplazarlos en y luego nuestra clase personalizada está justo abajo en la parte inferior. Una forma de cambiar el orden del archivo generado es mover nuestras clases así como así, para que podamos mover nuestro archivo personalizado a tal vez justo debajo de los estilos base. Si fuéramos a guardar esto e ir a la terminal y luego volver a ejecutar nuestro comando generate, esto luego regenerará nuestro archivo Tailwind basado en este nuevo orden. Una vez hecho esto, si vamos al archivo Tailwind y ahora en lugar de estar al fondo, no vemos nuestra costumbre. Entonces tomemos una búsqueda. Esto ahora se ha movido a la línea 603, que está justo por debajo de todos estos estilos base. Esto nos podría ayudar si necesitamos mover algún CSS, tal vez para evitar cualquier anulación o simplemente en general colocarlo en el orden que quieras. Una alternativa a esto es Tailwind también proporciona una directiva para ayudar con esto, podemos asignar nuestra clase personalizada para que se agrupe con cualquiera de estas sobresecciones. Si nuestra clase personalizada se basaba en una utilidad de un componente o solo queríamos un estilo base para nuestro proyecto, podríamos fusionar esto en uno de estos grupos. El modo de hacerlo es con la directiva de capa, lo que creamos la capa usando el símbolo at seguido del nombre del grupo en el que desea fusionarla. Vamos por una base para este ejemplo y luego abrimos un conjunto de llaves para insertar nuestro código personalizado. Podemos agarrar nuestra clase personalizada desde antes y agregar esto dentro de nuestra capa. Esto puede contener tantas reglas CSS como queramos incluir, por lo que podríamos seguir adelante, agregando diferentes clases y todas estas se fusionarán en. No, guarde este archivo y, nuevamente, en una terminal, regenere esto. Ese fue nuestro archivo Tailwind, esto está en la línea 603 con nuestros estilos base. Si tratamos de cambiar esto, tal vez componentes luego vuelva a ejecutar nuestros comandos de terminal. Veamos qué pasa después de que ejecutemos esto. Una vez hecho esto y de vuelta a nuestro archivo Tailwind, nuevamente hacemos nuestra búsqueda de una costumbre y esto ahora se ha movido hacia abajo a la línea 637, fusionada con el resto de los componentes. Esto es útil para reorganizar nuestras clases personalizadas. Otra directiva útil es aplicar y lo utilizamos para crear nuestros propios componentes reutilizables. A ver esto, hagamos algún trabajo de limpieza. Podemos quitar esta sección personalizada de antes y también en nuestra página de índice, echemos un vistazo a nuestra clase personalizada. Esto está justo dentro de nuestro rumbo nivel 1 y ahora se ha eliminado el color naranja. Volver a esta directiva aplicar y esto se utiliza para resolver un problema con el uso de Tailwind. El problema es que nuestro archivo HTML puede llenarse realmente con datos y muchos nombres de clase diferentes. Además, a menudo duplicamos las mismas clases en múltiples elementos. Un ejemplo de esto son todos estos enlaces en la barra lateral. Echemos un vistazo a nuestro inventario, por ejemplo, y aquí destacamos todas las clases. Podemos ver que lo hemos usado varias veces. hemos usado para los pedidos, vamos a desplazarnos hacia abajo, los hemos usado para el análisis, para los clientes, para los cupones, tenemos mucho código duplicado dentro de aquí. La directiva aplicada nos da la oportunidad de sacar todas las clases HTML y crear una configuración reutilizable como componente. La forma de hacerlo, si copiamos todas estas clases de uno de nuestros enlaces, copiarlas y luego pasamos a nuestro archivo CSS personalizado. Podemos empezar dándole a esto un nombre de clase de nuestra elección, así que vamos por nav-link. Esto se parece un poco a una configuración CSS normal pero lo que sí tenemos que hacer dentro es agregar la directiva de aplicación. Después de esto, pega en las clases de utilidad que quieras incluir, agrega un punto y coma al final, y luego baja a nuestra terminal, vuelve a ejecutar el mismo comando, dale a esto unos segundos para que se ejecute y esto debería insertar esto en nuestro archivo Tailwind. Vamos a copiar nuestro enlace de navegación a nuestro archivo Tailwind, comando o control F2 search file, peguemos esto en, y ahora tenemos nuestro enlace de navegación hacia abajo en la parte inferior. Tenemos el radio fronterizo, que podemos ver si entramos en nuestra sección aquí. Esta es la sección redondeada, tenemos relleno, tenemos colores de texto, y también tenemos estos efectos flotante también. Podemos ver dentro de nuestro archivo Tailwind que estos efectos flotante se han generado como nuestro relleno, como nuestros colores, y también el color para el efecto hover también. Ahora lo que podemos hacer es ir a nuestra página de índice y en lugar de tener todas estas clases insertadas, podemos entonces usar nuestra clase personalizada, que acabamos de crear, que era nav-link, y luego podemos usar esto en lugar de todo el resto de las clases justo arriba. El análisis, los clientes, el inventario, los pedidos. Tenga cuidado de no agregar esto a los elementos de span y tenemos los productos. Creo que estas son todas las secciones que necesitamos reemplazar y ahora si guardamos esto y volvemos al proyecto, asegúrate de que el navegador se vuelva a cargar y todas las mismas clases siguen aplicándose. Podemos confirmarlo si eliminamos el nav-link de alguno de estos elementos y esto ahora ha eliminado el CSS. Vamos a reinstaurar esto y para reorganizar esto, también podemos agregar esto al grupo de componentes rodeándolo en la directiva de capas. Al igual que miramos antes, ve a nuestro archivo personalizado y luego coloca nuestro lugar, nuestra sección desde antes, agrega en la directiva de capas, y colocamos esto dentro de nuestros componentes, mira el aparatos ortopédicos y luego podemos pegar la sección completa desde antes de volver al interior. Abajo a la terminal, corre el mando rebelde. Probemos esto en el navegador, actualicemos. No deberíamos ver ningún cambio porque todo lo que hemos hecho es mover esto a la sección de componentes del archivo CSS Tailwind. 17. Utilidades de lectores de pantalla: Bienvenido de nuevo. Este video va a echar un vistazo a un par de utilidades útiles del lector de pantalla. Actualmente estoy dentro de la documentación de Tailwind y en la sección de lectores de pantalla, que también puedes encontrar en Accesibilidad. Los lectores de pantalla son importantes para la accesibilidad y leen todos los contenidos de nuestra página web, los usuarios con discapacidad visual. Por lo que si un usuario tiene discapacidad visual y no puede ver nuestro sitio web como se pretende, puede utilizar un lector de pantalla para leer los contenidos. Contamos con dos clases de utilidad de lector de pantalla que proporciona Tailwind. El primero es sólo SR, y SR sólo elemento elevado desde la vista. Pero aún así se mantiene en su lugar para permitir que un lector de pantalla lea los contenidos. Podemos entonces usar Not SR solamente y éste básicamente deshará lo que acabamos de ocultar y reinstalar dentro del navegador. Entonces en el proyecto, vamos a echar un vistazo a cómo hacer esto dentro de la mesa, rizado dentro de nuestras filas, tenemos este botón Editar al final. Por lo que también quizá no necesitemos este título Editar en la parte superior. Esto se debe a que, para un usuario no con discapacidad visual, estos botones de Editar son probablemente suficientes para decirles qué hacer. Lo que podemos hacer es ocultar este encabezado en la parte superior, pero aún así permitir que un lector de pantalla lea si es necesario. Hagámoslo localizando nuestra mesa. Bajar a la sección requerida y dentro del cabezal de mesa, tenemos que ir al final de esta sección para encontrar nuestro texto Editar justo aquí. Dentro de los clústeres, podemos usar la clase de solo pestillo SR. Guarda esto y este encabezado ahora se está ocultando a la vista, pero aún así será leído por los lectores de pantalla. Recuerda también tenemos el Not SR only Class 2, que deshará esto. Esto también se puede usar para mostrar y ocultar contenido en diferentes tamaños de pantalla, pero no lo necesitamos para nuestro caso de uso. Esto es sólo un pequeño cambio, pero podría ser realmente útil en tu sitio, si tenemos una sección que necesitamos ocultar, seguimos en su lugar para los lectores de pantalla. 18. Implementación: Una vez que hayamos terminado nuestros sitios y estamos contentos con los contenidos, podemos entonces desplegar el sitio utilizando un servicio como Netlify. Si lo deseas, puedes hacer más cambios y personalizaciones a este proyecto. En primer lugar, sólo voy a dejarlo tal como está. Netlify hace que sea realmente fácil hacer que nuestros proyectos se pongan en vivo en la web. Para usarlo, dirígete a netlify.com, es gratuito de usar. Si no lo has usado antes, tendrás que seguir adelante y crear una nueva cuenta gratuita con este enlace de registro en la parte superior. Una vez que hayas iniciado sesión, te llevarían a un área de administración, que debería verse así. Si tienes algún sitio actual que usamos en el pasado, esto estará disponible en este enlace sobre la parte superior. Para agregar un nuevo sitio a Netlify, tenemos un par de opciones diferentes. Si estás usando GitHub, puedes usar este botón en la parte superior y vincularlo a tu repositorio. Esto tiene el beneficio de que se actualizará automáticamente cada vez que empujemos cualquier cambio a ese repositorio. O una forma realmente simple si no tienes una configuración de repositorio es simplemente arrastrando sobre nuestra carpeta de proyecto. Esto irá adelante y construirá nuestros sitios y luego nos dará un enlace arriba en la parte superior, en el que podemos dar click para abrirnos dentro de una nueva pestaña. Abre para arriba. Esto nos dará un enlace de página web en vivo el cual podremos compartir con amigos y familiares. Puedes ver lo rápido y fácil que es implementar tu sitio usando Netlify. También podemos modificar esta URL. Si entramos en la configuración de Dominio, haga clic en las “Opciones”, podemos editar el nombre de nuestro sitio, digamos Mi super proyecto, y luego podemos guardar esto. Ahora podemos hacer click en esto, abrir esto en una nueva pestaña. Esto también apuntará a nuestro proyecto. Si querías a un dominio personalizado para que no tengamos la app Netlify al final, también puedes seguir los pasos para hacerlo con el botón Añadir dominio personalizado. Eso es todo. Así de fácil es desplegar un sitio estático usando Netlify.