React y Tailwind CSS | Implementa el modo oscuro en React

1. Introducción al curso: Bienvenido a este curso en el que hablaremos sobre cómo puedes hacer uso del CSS de viento de cola con la aplicación react Mi nombre es Fesel y estoy emocionado de guiarte a través del poderoso viaje de combinación de CSS react y tailwind Como desarrollador web e instructor, me apasiona ayudar a estudiantes como tú a construir aplicaciones limpias, eficientes y visualmente impresionantes. En el acelerado panorama de desarrollo web actual, crear diseños modernos y receptivos sin comprometer el rendimiento es imprescindible Tailwind CSS, con su primer enfoque de utilidad es un cambio de juego para el estilo Combínalo con capacidades dinámicas de React, y tienes el kit de herramientas perfecto para construir una aplicación web de grado de producción. Ahora, aquí hay un vistazo de lo que cubriremos en este curso en particular Entonces comenzarás con la introducción al CSS de viento de cola. Descompondremos su primer sistema de estilo de utilidad y luego lo guiaremos a través de la configuración un formulario HTML simple que hará uso de CSS de viento de cola Luego exploraremos el diseño receptivo y la tematización en react y nuestra aplicación aprovechará los vientos de cola, flexibilidad para crear diseños que se ven geniales en cualquier pantalla Y para lo más destacado de nuestro proyecto de curso, crearás un modo oscuro totalmente funcional toggle in react. Y esto te ayudará a mejorar la experiencia de usuario y la estética de cualquier aplicación que construyas en el futuro. Al final de este curso, tendrá una sólida comprensión de cómo puede integrar CSS de viento de cola con react para construir aplicaciones web elegantes y receptivas Ahora, no solo aprenderás sobre cómo sino también el por qué, asegurando que puedes aplicar estas habilidades a proyectos del mundo real. Ahora bien, ¿para quién es este curso? Entonces, si eres un principiante, que está ansioso por explorar algún diseño web moderno o un desarrollador de reaccionar que busca agilizar tu flujo de trabajo, entonces este curso tiene algo valioso para todos, los desarrolladores. Y cuando digo a todos, me refiero a desarrolladores de todos los niveles. Entonces, tanto si eres principiante, desarrollador de nivel intermedio o desarrollador avanzado, este curso podría ser perfecto para ti, dado que quieres explorar cómo puedes modernizar tu aplicación web Entonces, ¿estás listo para dominar el arte de construir hermosas aplicaciones de reacción con tailwind CSS? Yo soy. Vamos a sumergirnos y crear algo increíble juntos. Nos vemos dentro del curso. 2. Libera el poder de Tailwind CSS: guía para principiantes: Entonces ahora es el momento de que comencemos a hablar de viento de cola CSS Ahora bien, ¿qué es el CSS de viento de cola? ¿Todo bien? Entonces les pediría a todos a Google Tailwind, y verán este sitio web tailwind CSS ¿Bien? Ahora, tailwind CSS es una utilidad para CSS framework que permite construir diseños personalizados muy rápidamente aplicando clases ¿Bien? Ahora bien, si estás familiarizado con HTML, sabrías que los elementos HTML de aquí. Se pueden ver algunos elementos HTML, bien, imagen TV. Todos tienen atributos, bien y uno de los atributos es la clase, ¿bien? Entonces 1 segundo por aquí. Bien. Ahora bien, lo que pasa es que si quieres aplicar cualquier tipo de CSS, lo que harías es mencionar la clase, y luego básicamente agregarías el CSS en el archivo CSS, y ese CSS será para esta clase en particular. Así es como va a funcionar, ¿verdad? Entonces tienes que escribir CSS, y tienes que asegurarte de que los nombres de las clases coincidan. Pero con tailwind, lo que sucede es que si configuras este framework en particular, solo tienes que hacer uso de las clases, y no tienes que escribir realmente ningún tipo de CSS Entonces déjame mostrarte a lo que me refiero. Entonces si vas a docs por aquí, Bien, digamos, si vas por el modo oscuro, puedes ver por aquí. Bien, ¿cómo se puede implementar el modo oscuro en el uso del viento de cola? Para que puedas ver por aquí, solo puedes hacer uso de BGite. BGIWhite significa fondo blanco. Bien, pizarra BG oscura 800. Entonces básicamente, dependiendo de las clases, lo que va a pasar es que todo se aplicará. Entonces te voy a dar algunos ejemplos como exhibir por aquí, dimensionamiento de cajas, bien. Contenedor. Entonces, si estás creando contenedor, puedes especificar SM, que es pequeño, mediano, grande, extra grande para Excel. Puedes hacer uso de esto. ¿Bien? Se puede decir PX, cuatro por aquí. Bien, entonces estas son todas las clases, básicamente usas en cada clase tiene un significado. Y en base a eso, el CSS se genera automáticamente. Ahora, un ejemplo sencillo es el padding. ¿Bien? Si quieres agregar relleno, dirás P cero, así que esto se agregará. Relleno de cero píxeles. Si dices PX cero, entonces se agregará padding left y padding right será agregado de cero pixel. P cero significa relleno superior e inferior. PS significa relleno en inicio de línea. Entonces estos son así que solo tienes que hacer uso de esta clase y estas propiedades se agregarán automáticamente. Así es como funciona. Hay varios ejemplos y lo revisan, y podría parecer, Oh, tengo que recordar todo esto, pero no es tan duro. A medida que comienzas a usarlo, pronto obtienes un buen agarre de esto, y empiezas básicamente a memorizar y recordar los nombres de las clases Así funcionan las cosas. ¿Bien? Así que puedes ver por aquí, estos son los ejemplos padding top six. Entonces se agrega relleno. Acolchado a la derecha cuatro, por lo que se agrega relleno. Entonces funciona de esa manera. Y hay como, puedes revisar esta documentación por aquí, ¿de acuerdo? Y hay amplio como se puede ver adjunto de fondo, clip de fondo, color de fondo. Hay muchos ejemplos y cosas que se han mencionado aquí. Así que solo puedes echarle un vistazo. ¿Bien? Entonces esto es increíble. Bien, porque no tienes que escribir ningún tipo de CSS. Solo haces uso de algo que está preconstruido y hecho para ti, ¿de acuerdo? Entonces eso es viento de cola. Yo los animaría a todos a pasar por este sitio web y echarle un vistazo. ¿Bien? Ahora, ten en cuenta que este sitio web sigue cambiando. Podrían cambiar la interfaz de usuario o algo así. Entonces, dependiendo de cuándo estés viendo este video, posible que veas una interfaz diferente, pero no te preocupes, ¿de acuerdo? Aún así no lo va a cambiar drásticamente, ¿de acuerdo? El concepto y el quid seguirán siendo los mismos. Bien. Así que solo explora esto. También hay bastantes ejemplos aquí en la página principal. Se pueden ver bastantes ejemplos, bien, para los colores. Bien, ejemplo para tipografía. Bien, puedes ver sombras. Bien. Entonces sí, esto es todo. Se puede ver juguetón, elegante. Bien. Se puede ver lo lúdico y que se puede hacer. Puedes ver que todo este CSS está siendo los nombres de clase, puedes ver los nombres de clase, cuáles son todos los nombres de clase que se están usando. Sólo hay que mencionar el nombre de la clase. Se puede ver aspecto elegante Mirada brutalista. Bien, símbolo lúdico. Entonces todo tipo de diseños son posibles es lo que estos ejemplos demuestran aquí. Responsive también es posible. Bien. Se puede ver SM, MD, LG. Entonces esto es en dispositivos pequeños, dispositivos tamaño mediano, dispositivos de gran escala. Bien. Entonces puedes especificar las clases de esa manera. Bien, puedes ver por aquí. Así es como se crea esto. Se puede ver. Bien. Entonces sí, eso es todo. Puedes repasar por los ejemplos. Hay bastantes ejemplos. Bien. Me encanta navegar y ver estos ejemplos. Son tan elegantes. Bien. Así que solo pasa por estos. Comprenderás la importancia de por qué esto es increíble, ¿de acuerdo? Y cómo pueden cambiar las cosas si empiezas a hacer uso de la cola fue, ¿de acuerdo? 3. Desde cero: crea tu primer proyecto HTML con Tailwind CSS: Entonces ahora es el momento de que juguemos un poco con tail vent CSS. Entonces lo que voy a hacer es que estoy aquí en código de Visual Studio. Tengo mi navegador también abierto uno al lado del otro. Bien. Lo que voy a hacer es crear un nuevo archivo, ¿de acuerdo? Selecciona un idioma, por supuesto, HTML. Crearemos un archivo HTML simple. Bien, tengo algún plug dentro que me puede ayudar a generar algún código boilerplate Bien. Y voy a mantener muchas cosas simples. Voy a saludar. El título es hola de esta página web en particular. Solo alejaré un poco para que veas qué código se está generando. ¿Bien? Puedes ver este código. Es un arrancador para HTML. ¿Bien? Ahora, vamos a hacer uso del viento de cola por aquí. Entonces voy a venir aquí. Bien. Y me desplazaré hacia arriba. Vamos a la documentación. Bien, y déjanos ver cómo puedes hacer uso de ella. ¿Bien? Entonces esta es toda la parte de la instalación, ¿de acuerdo? Esta es la instalación para el viento de cola CLI. Haremos uso de CDN. Bien. Entonces aquí, puedes ver cómo se puede usar el viento de cola. ¿Bien? Así podemos hacer uso de plugin de terceros. ¿Bien? Hay algunos ejemplos en los que se puede utilizar el viento de cola ¿Bien? Entonces lo que voy a hacer es, voy a copiar este código. ¿Bien? Diré guión. Voy a conseguir el elemento script. Ven aquí. Voy a añadir guión en la cabeza. ¿Bien? Esto está hecho. Vaya, accidentalmente presiono Guardar El archivo no se guarda. Eso está bien, pero voy a copiar esto también. Voy a venir aquí. Bien. Y aquí en el cuerpo, voy a pegar esto, ¿de acuerdo? Entonces sí, estamos haciendo uso de, ya sabes, algunas clases por aquí. ¿Bien? Se pueden ver algunas clases. Ahora, una cosa que me gustaría mencionar se suman sus clases. Bien, primero déjame guardar el archivo. Voy a guardar este archivo en el escritorio, ¿de acuerdo? Voy a guardar el archivo en mi espacio de trabajo donde estoy creando este proyecto para mantener las cosas simples. Entonces lo que he hecho es que navegué a la carpeta donde se creó este archivo, en mi sistema local, y simplemente hice doble clic en él para abrirlo en el navegador Y se puede ver, sin escribir ningún tipo de CSS, sólo usar, ya sabes, texto tres Excel. Puedo decir texto cuatro Excel, guarda esto y el tamaño será un poco más grande. Se puede ver, bien, texto siete Excel. Debe ser una clase válida, o, y se puede ver cómo está cambiando esto. Fuente negrita. Se puede hacer uso de semi negrita también, semi negrita por aquí. Bien, algo así. Bien, básicamente haré lo que sea que agregues por aquí, bien, eso va a recoger eso va a ser recogido. Bien. Y se puede ver subrayado también se está agregando También puedes agregar cursiva, lo que quieras a cualquier tipo de formato de texto ¿Bien? Puedes echar un vistazo aquí. Y con el tiempo, simplemente no se trata de, ya sabes, simplemente no se trata de esta cosa. Simplemente no se trata de clases, de recordar clases. Con el tiempo, aprenderás cosas y también empezarás a memorizar los nombres de las clases ¿Bien? Se puede ver el estilo de fuente. Hay tantas itálicas. Si agrego cursiva, se convertirá a itálica. Se puede ver por aquí. Si agrego itálica. Uy. Entonces quiero seguir subrayado, veré cursiva fresca Se puede ver Bien. Así que esta es la magia del viento de cola, ¿de acuerdo? Creemos también un poco. Como, me voy a deshacer de esto. ¿Bien? Voy a comentar esto, y podemos agregar un tipo más de UI. Bien. Lo que voy a hacer es simplemente, ya sabes, ampliar este Opt. Bien. Iremos a pantalla completa. ¿Bien? Y lo que voy a hacer es guardar esto básicamente puedes crear un poco mejor UI también, y quiero mostrarte eso. En cuerpo, lo que voy a hacer es decir clase por aquí, voy a decir BG IphenGray y voy a decir 100 por Diré flex, diré Justify centro. Diré artículos al centro. Básicamente, estoy trayendo todo al centro, pantalla horizontal por aquí. Voy a guardar esto. Bien. Ahora bien, si guardas esto y si ves la salida , vaya, si ves la salida por aquí, déjame mostrarte la salida Entonces no hay salida porque no hemos agregado nada dentro del cuerpo. Bien. Entonces déjame hacer eso y veremos cómo se ve la salida. Entonces lo que voy a hacer es agregar una clase div por aquí, Div lo siento, no el elemento Divlas Div Bien. Y déjame aplicar algunas clases como clases de tailbin Entonces voy a ver PG de blanco por aquí. Bien, relleno de ocho, redondeado. Bien, LG. Esto es para radio de botella, sombra de Bien. Se puede ver LG redondeado. Si quieres conocer alguna de las clases, puedes tomar estas clases. Puedes venir aquí, puedes buscarlos. Bien. Se puede ver el radio del borde. Se puede ver. Bien. Tan redondeado LG, redondeado medio, Bien, redondeado. Y esto es redondeado completo. Entonces, dependiendo de qué clase uses, obtendrás la salida correspondiente. Ahora dentro de esto, lo que puedo hacer es si guardas esto, déjame guardar esto o por aquí. Yo guardo esto. Bien, y voy a refrescar esto. Se puede ver esto entrando por aquí, esta especie de parche blanco. Ahora, déjame ampliar esto y déjame terminar lo que estoy tratando de hacer. Voy a añadir H uno por aquí. Voy a saludar. Bien. Y voy a decir viento de cola, CSS, algo así Solo estoy agregando un mensaje de hola, y deberías ver el resultado. Bien. Entonces si hago una actualización, puedes ver Hola, viento de cola, CSS Incluso puedo embellecer este H one, así puedo decir clase por aquí Bien. Déjame decir texto. Voy a aumentar el tamaño del teléfono, así que voy a decir a Excel, fuente de negrita, y voy a decir texto. Quiero gris, Bien, y gris de 800. Bien. Sí, veamos cómo se ve. Por lo que ociosamente debería verse mucho mejor. Se puede ver. ¿Verdad? Así que Hello tailwind CSS es lo que estás viendo como salida A. Incluso puedes agregar una etiqueta P. Simplemente puedes seguir construyendo sobre esto. Esto es absolutamente increíble. Etiqueta P por aquí. Puedes decir, aquí puedes agregar cualquier tipo de mensaje. Esto es subtexto Este es un ejemplo simple usando CSS de viento de cola por aquí. Y voy a añadir algunas clases. Bien. Entonces voy a decir clase de dos texto a Excel, fuente negrita por aquí. O no debería tener Excel por aquí, porque esto es un subtexto, así que solo voy a tener texto, Cree y en vez de 800, solo lo voy a alimentar un poco. Diré 600, una sábana más ligera. Déjame refrescarme. Se puede ver. Hola tailwind CSS es un ejemplo sencillo usando tailwind ¿Cómo se ve esto? ¿Sabes? Literalmente no has escrito ningún tipo de CSS por aquí. Sin CSS. Acabas de agregar esta etiqueta de script, y solo estás haciendo uso de clases, y con solo hacer uso de clases, estás viendo esta increíble salida. ¿Bien? Es así de hermoso. Bien, no tienes que enfocarte en escribir CSS, solo tienes que enfocarte en usar las clases adecuadas, y eso es lo que tailwind es para ti Y con el tiempo, te lo diré, podría parecer un poco duro en este momento, pero con el tiempo, se vuelve súper fácil y empiezas a recordar clases. Por ejemplo, estas son las clases para esquinas redondeadas, así que la recuerdas si la usas dos, tres veces, ¿sabes? Se puede ver redondeado completo, redondeado ninguno. ¿Bien? Hay diferentes ejemplos redondeados R, LG, puedes ver. Se puede ver cómo se aplica. Hay tantos ejemplos, y la documentación también es muy buena. ¿Bien? Entonces espero que estés disfrutando de esto y espero que te encante este ejemplo y las posibilidades que puedes hacer con este increíble framework. 4. React y Tailwind: configura tu primer proyecto como un profesional: Entonces ahora es el momento de que comencemos a hablar de ¿cómo puedes configurar tu proyecto de reacción con viento de cola Entonces lo que voy a hacer es aquí, estoy en código de Visual Studio, y estoy en el directorio raíz de la carpeta donde estoy construyendo todos los proyectos. ¿Bien? Ahora, dentro de este directorio raíz, podemos crear un proyecto más que ya tengo reaccionar Tailwind Entonces este es un comando que puedes hacer uso para crear un nuevo proyecto de reacción usando at. Entonces se puede decir que los NPM crean trigo a la tasa más reciente. Y esto te hará algunas preguntas si quieres tener qué framework quieres usar o qué plantilla quieres usar. Todas esas preguntas como tienes que seleccionar reaccionar, vainilla Gs y todo eso. Y dependiendo de tus preferencias , creará un proyecto para ti. Ya he hecho este paso, así que no voy a hacer esto otra vez, pero lo que voy a hacer es haber creado este proyecto llamado React Tailwind Me dirijo a este proyecto, o y luego ejecutaré el servidor. Entonces voy a decir NPM ejecutar tabulador por aquí. Bien. En el momento en que ejecute esto, verá esta página por defecto aquí arriba. ¿Bien? Ahora, se crea este proyecto, pero aquí no se hace ninguna configuración de viento de cola Ahora, para hacer la configuración del viento de cola, necesitas agregar o agregar un par de archivos de configuración o debería decir solo un archivo de configuración, ¿de acuerdo? Y te voy a mostrar la importancia de ese archivo y también cómo puedes crearlo. Entonces ahora aquí en tailwind css.com, si vas a empezar, te llevarán a estas acciones, y vas a ver por aquí, cómo puedes instalar tailwind, ¿ Para que puedas instalar viento de cola de esta manera. Bien, se puede decir NPM instalar guión D tailwind CSS. Entonces esto asegurará que la dependencia se agregue a tu proyecto. Entonces también necesitas inicializar tailwind en tu proyecto, lo que significa que necesitas ejecutar este comando NPH tailwind Css en él, y esto generará este archivo tailwind config dot gs, que es como un archivo que es como un Entonces esto es algo que tenemos que hacer. ¿Bien? Lo que voy a hacer es copiar los comandos uno por uno. Vendré aquí y crearé un nuevo conjunto de terminales. Bien. Una cosa más quiero mencionar que este es el contenido del archivo confit de viento de cola. ¿Bien? Ya ves que así es como se ve, ¿de acuerdo? Puedes extender tu tema, el tema de viento de cola predeterminado Si quieres agregar cualquier tipo de colores personalizados o cualquier tipo de definición que sea válida para tu aplicación, puedes definirlos aquí. Los plugins que puedes mencionar, ¿de acuerdo? Y luego necesitas agregar esta pieza de código en el archivo CSS principal o el archivo CSS raíz de tu proyecto, para que el viento de cola sea recogido por tu proyecto ¿Bien? Entonces estos son algunos de los pasos que se han dado, y así es como se puede hacer uso de para verificar si el viento de cola está configurado correctamente ¿Bien? Ahora, junto con tailwind, bien, antes de instalar tailwind, quiero decirte que hay un par de cosas que también necesitamos instalar Entonces esto es solo para instalar tailwind, ¿de acuerdo? Ahora, verás pestañas por aquí. Usando post CSS. ¿Bien? Entonces vamos a seguir este enfoque. ¿Bien? Así que instalaremos tailwind y también configuraremos post CSS Ahora, viento de cola, por supuesto, sabemos que es como un framework de fuerza de utilidad para CSS, ¿de acuerdo? Ahora bien, ¿qué es el post CSS, bien? Así post CSS es una herramienta para transformar CSS con el plugin Ja Script. Bien, básicamente hace el trabajo de procesar tu CSS y aplicar transformaciones como modificación, agregar soporte para futuras funciones de CSS, versiones de CSS, etc. ¿Bien? Eso es lo que va a hacer, y luego también vamos a hacer uso del prefijador automático que puedes ver por aquí Entonces este comando, dice, Instalar guión D, tailwind CSS, post CSS, y prefijador automático Entonces Autoprefixor es un complemento que agrega automáticamente cualquier tipo de prefijos específicos del navegador Por ejemplo, algunos navegadores necesitan que se agregue guión webkit, ¿de acuerdo Y agregar guión webkit en ese navegador en particular garantizará Navegadores Mozilla Firefox, Mozilla Firefox. Quieren que se agregue guion alce. Donde sea que sea necesario, ¿verdad? Y eso es básicamente para tener una mejor compatibilidad con el navegador. Las aplicaciones pueden tener una mejor compatibilidad. Entonces todo eso se agrega automáticamente, no es necesario agregar eso manualmente. ¿Bien? Y esto hace que tu CSS sea mucho más compatible y listo para la producción. ¿Bien? Entonces recomiendo agregar estas dos cosas, bien. Y yo lo haría esa es la forma en que vamos a configurar viento de cola con react ¿Bien? Entonces voy a seguir este enfoque. Sólo voy a copiar estos comandos. Voy a venir aquí, ¿de acuerdo? Y voy a decir CD. Reacciona viento de cola, navegaré hasta el directorio del proyecto. Pasaré esta orden y presionaré a Ender. ¿Bien? Ahora bien, esto va a correr. Bien, se puede ver que agregó paquetes. Y si vas a paquetes en, vas a ver por aquí. Se puede ver reaccionar. Simplemente colapsaré esto y solo minimizaré esto para que haya una mejor vista. Ahora aquí, no voy cerrar Línea de comandos porque la vamos a necesitar, pero puedes ver por aquí tailwind post CSS y también tendrás AutoPrefixor Bien Esto está hecho. ¿Todo bien? Ahora, se han agregado los paquetes, lo que significa que existen dependencias ¿Bien? Entonces ahora tenemos que hacer los siguientes pasos como inicializar el viento de cola, Y también necesitamos inicializar post CSS. Entonces eso es algo que también voy a hacer. Bien. Y eso va a crear un archivo init como este, ¿de acuerdo? Y entonces, estos son los contenidos de aquí. Entonces esto es post CSS config JS, puedes ver, y esto es tailwind config ¿Bien? Y luego agregaremos esto a nuestro CSS raíz. Esto es lo que vamos a hacer. Y entonces vamos a probar las cosas, ¿de acuerdo? Lo que voy a hacer es, voy a venir aquí. Así puedes crear manualmente post css conflicto punto gs. Se puede ver por aquí. Puedes crear esto manualmente o lo que voy a hacer es que voy a obtener este auto generado. Entonces hay un comando que necesitamos saber. Entonces voy a decir N PX, cola viento CSS. En ella, vaya, guión P. ¿Bien? Ahora mismo, si abres la estructura del proyecto, no hay ningún archivo de conflicto de viento de cola definido, déjame ejecutar esto y déjanos ver qué se agrega Entonces puedes ver que se agregó la configuración del viento de cola y se agregó la configuración de CSS posterior ¿Bien? Se puede ver por aquí la salida también. creó el archivo de configuración tailwind y se creó el archivo de configuración CSS posterior Entonces este es un comando NP x, tailwind CSS en él, guión P. tailwind CSS en él, guión P. ¿Bien? Entonces si abres estos archivos, puedes ver que esto es post CSS, ¿de acuerdo? Y este es el archivo para la configuración del viento de cola. Puedes ver los dos archivos, ¿de acuerdo? Y post CSS está por aquí, básicamente. Así que esto está haciendo uso del viento de cola y el prefijador automático Y este es el archivo de configuración del viento de cola. Ahora bien, si aún estás confundido en cuanto a por qué hemos agregado post CSS en primer lugar, bien, me gustaría reiterar que post CSS es una herramienta, bien, que te permite aprovechar los plugins que existen. ¿Bien? Así como dice el nombre post CSS. Entonces básicamente, hace el trabajo de postprocesar el CSS, ¿de acuerdo? Como mejorarlo para compatibilidad específica del navegador y todo eso. Entonces básicamente, si quieres agregar plugins, a tu aplicación, necesitas hacer uso de post CSS. Puedes ver por aquí en el post CSS config, hemos añadido tailwind CSS, hemos configurado tailwind CSS, y también decimos que hace uso de Bien. Prefijador automático lo que hace es que agregará etiquetas CSS específicas del navegador a tu CSS ¿Bien? Eso es lo que va a hacer. ¿Bien? Entonces sí, eso es lo que hemos hecho, y todas las dependencias se han agregado por aquí Bien. Así que publicar CSS es solo una herramienta que te permite aprovechar los plug-ins que existen. Eso es lo que es. Entonces no puedes agregar autoprefixor sin hacer uso de post CSS Entonces eso es algo que estamos haciendo por aquí. ¿Bien? Y espero que esto tenga sentido ahora en cuanto a por qué estamos haciendo lo que estamos haciendo. Entonces esta es solo una configuración de tiempo que tienes que hacer, y luego entonces no vamos a tocar esto, ¿de acuerdo? Entonces pero hay que saber por qué lo estamos haciendo. ¿Bien? Entonces eso es importante. Ahora bien, estas son cosas que debes agregar aquí. ¿Bien? Entonces hay que asegurarse de que todas las partes en todos los archivos de plantilla, básicamente, así lo dice aquí. Agrega las partes a todos los archivos de plantilla, como todos los archivos HTML, archivos JavaScript, archivos JSX Entonces, si vienes por aquí. Bien. Bien, entonces no se agrega. Bien, entonces tenemos que agregar eso. Entonces lo que voy a hacer es que voy a copiar esto por aquí. Bien. Y voy a pegarlo por aquí, ¿de acuerdo? Y a t. Bien. Ahora lo que voy a hacer es que voy a seguir este cuarto paso. Voy a copiar esto, ok. Y vengamos por aquí y por aquí en el CSS principal. Entonces, ¿dónde está el CSS principal? ¿Bien? Entonces entraremos en la carpeta SRC Aquí tenemos app dot CSS, que tiene algo de CSS, y luego tenemos index dot CSS, que también tiene algo de CSS. Entonces me desharé de ambos porque no necesitamos ambos. Entonces app dot CSS también. Bien. Entonces nos hemos deshecho de todo. Ahora en índice punto CSS en el archivo CSS raíz, y así esto se está utilizando índice punto CSS por aquí en punto principal GSX Entonces lo que voy a hacer es en Index dot CSS, voy a agregar esto, ¿de acuerdo? Ahora bien, esto se agrega, ¿de acuerdo? Y entonces lo que tenemos que hacer es básicamente, tenemos que probar el viento de cola, ¿de acuerdo? Entonces voy a copiar esto. Y voy a estar sumando a mi proyecto. ¿Bien? Pero antes de agregar al proyecto, solo ve una cosa. Aquí eliminamos el CSS, pero incluso después de configurar el viento de cola, bien, no es traer el efecto viento de cola, Y eso es algo que puedo sentir. ¿Bien? Y sé cuál es el tema. Lo que voy a hacer es, sólo voy a detener el servidor. Bien, detén el servidor y voy a reiniciar para que se recojan los nuevos archivos de configuración. Bien. Veamos si Bien, así que ahora puedes ver que el viento de cola ha entrado en vigor, o la interfaz de usuario cambió El problema se debió al reinicio. Así que creamos nuevos archivos de configuración que se recogen durante el reinicio. Bien. Además, una cosa más que voy a hacer por aquí es que tengo HTML GS. Bien. También voy a añadir GSX por aquí ¿Bien? Entonces también voy a agregar GSX, bien. Y TSX, que es para mecanografiado. Bien. Y voy a ver si esto. Bien, entonces esto va a ser atendido. ¿Bien? Lo que voy a hacer es, esto está hecho. Ahora voy a copiar esta pieza. Bien. Vengamos por aquí. Y por aquí, sólo voy a entrar, tal vez vamos a significar punto Aix o app dot GSX App.j6 está teniendo este código que se le está rindiendo. Bien. Simplemente minimizaré esto. Lo que haría es que saldré de todo este TIF por aquí hasta aquí, y solo voy a armar esto. Y presionaré Tab dos veces, guarda esto y ya verás. Dice texto de tres Excel y fuente de negrita. Y subraya esto, ¿de acuerdo? Y puedes ver una interfaz de usuario decente entrando por aquí, ¿de acuerdo? Y esto es estilo usando viento de cola. ¿Bien? Al igual que, no hay mucho que hayamos hecho por aquí. Bien, acabamos de copiar el código, pero también hemos escrito CSS muy sencillo. Es que no es tan duro. ¿Bien? Incluso podemos escribir algunos CSS por nuestra cuenta. Entonces lo que puedo hacer aquí es que puedo deshacerme de esto. Bien. Y puedo escribir mi propio CSS. Puedo decir TvO, por aquí, y voy a decir clase. Voy a crear una clase. Bien, y voy a decir que nombre de la clase es BG guión Blanco Ahora, puedes ver todas las sugerencias de clases de viento de cola aquí Entonces el código de Visual Studio me está sugiriendo todas las clases de viento de cola Estas son todas las clases de viento de cola. Entonces en vez de escribir, tengo que decir BG gris, y me va a dar sugerencia y solo puedo seleccionarlo. Bien. Y también me mostrará el color que estoy seleccionando. Entonces esto es para el fondo gris por aquí. Si no estás seguro de qué es una clase en particular, simplemente puedes copiar esto y venir aquí e incluso puedes buscar por aquí. Si buscas, verás que es para el color de fondo. Se puede ver por aquí, fondo negro, pizarra. Entonces en vez de pizarra y negro, estamos haciendo uso del gris. Se puede ver por aquí. Si dices BG Indigo, 500, te va a dar colores así, ¿cuál es el CSS que genera en retrospectiva Déjame mostrarte eso también. Entonces aquí, dice BG gris 100. Si pongo el cursor sobre esto, verás en el pop up hover, este es el CSS que se genera. Color de fondo. Este es el valor RGB y la opacidad de uno. Se puede ver que esto es CSS al que se traduce esta clase. Ahora bien, cómo estoy consiguiendo esta característica de Auto sugerir, en primer lugar, para las clases, la vista previa por aquí, y también qué CSS se está recogiendo. Entonces te diré, hay un interesante plug in que puedes instalar en código de Visual Studio cada vez que estés trabajando con tail went. Recomiendo encarecidamente que se conecte. Así que aquí he instalado bastantes plugins, bien. Entonces, permítanme ampliar esto. ¿Bien? La parte de los enchufes. Así que puedes ver, hay bastantes enchufes para angular. La etiqueta de cambio de nombre automático es una, colorización de pares de corchetes es una que estoy usando ES siete. Esto es para generar fragmentos Entonces, si quieres generar algún tipo de fragmentos como código de componentes, código estándar, todo lo que puedes hacer Si te desplazas hacia abajo, hay un complemento intellisens llamado Intellisence ¿Bien? ¿Dónde está? No veo. Preteer también es útil aquí. Bien. No lo puedo encontrar por aquí. Live Server también es bastante bueno. Bien. Oh, aquí, tailwind inteligencia CSS. Entonces esto es algo que necesitas instalar, así que necesitas buscar CSS de viento de cola por aquí O en el mercado de plug-ins, y te encontrarás con este enchufe en CSS de viento trasero Bien. Los animo a todos a instalar esto, porque esto va a que puedan ver aquí en la captura de pantalla en sí, en la captura de pantalla aquí. Te está mostrando la auto sugerida. Entonces es útil. Es realmente útil. Te está dando sugerencias automáticas, y básicamente, hay tantos nombres de clases. También te va a ayudar con la previsualización. Así que es realmente útil enchufar cuando estás trabajando con viento de cola Porque hay tantas clases. Por supuesto, los nombres de las clases aprenderás eventualmente durante un período de tiempo, pero esto ayuda a acelerar. Ahora si quiero agregar relleno, puedo decir P guión ocho Y puedes ver que está generando este CSS para mí, padding de dos RM, ¿verdad? Entonces lo sé, bien, esto se está aplicando. Si no quiero relleno de dos REM, puedo hacer cuatro por aquí. Puedo hacer cinco. Bien. Para que pueda hacer seis. Se puede ver que el relleno de 1.5 se convirtió en relleno de ocho. Bien. Entonces en base a eso, puedes hacer las cosas, bien, guión redondeado LG, y puedes decir sombra Sombra de G por aquí, puedes ver que este es el CSS que se está generando ¿Bien? Entonces todo esto, absolutamente puedes hacer. ¿Bien? Entonces estoy agregando PG. En lugar de BG gris, voy a mantener esto a BG blanco por aquí. Veremos cómo se ve BG blanco. Añadiendo ocho, LG redondeado, sombra LG. Bien, voy a añadir un div más en la parte superior, en la parte superior, básicamente. Así que aquí, voy a cortar este div y voy a venir aquí. Bien. Y sólo voy a sangrar esto. ¿Bien? Entonces esto está hecho. Y voy a decir por aquí en vez de BG blanco, voy a decir gris. Bien, gree de 100. Diré flex. Bien, justifica centro. Bien, y los artículos también se centran, algo como esto. Y pantalla horizontal. Bien. Así que esto está hecho, ¿de acuerdo? Tengo un par de propinas. Ahora lo que voy a hacer es, déjame agregar H uno por aquí. Voy a añadir H uno. Bien. Y dentro de H uno, voy a saludar. Y tail wind CSS en react, algo así. Bien. Y básicamente puedes agregar las clases por aquí, así puedes decir Ups, así puedo decir nombre de clase Y se puede decir guión de texto a Excel, y fuente de negrita Bien. Y se puede decir texto gris gris de vamos a mantenerlo 800. Bien. Y sí, esto está hecho. Entonces deberíamos tener alguna interfaz de aspecto decente por aquí, si ves. Para que puedas ver, Hola tailwind CSS en react. Bastante justo. También puedes agregar subtexto, así que agregaremos un subtexto por aquí Diré Ptag por aquí, algo así. Y voy a decir que este es un ejemplo sencillo usando tail wind, CSS en react project. Algo así. Si guardo esto, verás la salida aquí arriba por aquí, pero esto no está estilizado, así que voy a agregar algunos nombres de clase por aquí para que se vea bastante decente Diré texto gris. ¿Bien? Texto gris de déjame hacerlo más ligero de 600 y ya ves que ahora es más ligero. Bien. Para que veas que esto es lo que es. Si lo haces a pantalla completa, verás esto en el centro. Y estoy acercado un poco por 200. Entonces esta es la visión real en el cien por ciento, como en la visión normal. Bien. Si me acerco, voy a ver esto mucho más rápido. ¿Bien? Entonces así es como puedes configurar, ya sabes, tailwind CSS en tu proyecto Y esto hace la vida, mucho más eficiente, fácil, como se puede imaginar, ¿verdad? Entonces espero que hayan disfrutado esto y encontrado útil. Voy a ver todo así. 5. Más allá de lo básico: domina el diseño responsivo y los temas personalizados en React con Tailwind: Hoy en día, cada vez que estás construyendo cualquier tipo de aplicación web, diseño responsive es muy, muy importante. Con mucha gente moviéndose a tamaños de pantalla más pequeños como tabletas y teléfonos móviles, es probable que tu aplicación también se use en tamaños de pantalla más pequeños. Y es muy importante que sepas cómo puedes construir tu aplicación para diferentes tamaños de pantalla. Por suerte con el viento de cola, esto es realmente, muy simple si entiendes lo que tienes que hacer Entonces te voy a dar una visión general de cómo el viento de cola te permite construir componentes compatibles con dispositivos móviles y no solo amigables para dispositivos móviles sino también amigables para diferentes tamaños de pantalla como tabletas Así que iremos a Empezar, y aquí en Get Started en el lado izquierdo, verás este diseño responsive. E incluso puedes buscar un diseño receptivo por aquí, ¿de acuerdo? Así que voy a ir al diseño receptivo por aquí, ¿de acuerdo? Y aquí es donde nos enteramos de cómo tailwind te permite escribir componentes o construir componentes que sean compatibles con diferentes tamaños de pantalla, ¿de acuerdo? Ahora, cuando hablamos de diseños responsivos en viento de cola, cada clase que existe en el viento de cola tiene o puede aplicarse condicionalmente para ¿Bien? Ahora bien, ¿qué es un punto de interrupción ¿Bien? Ahora, los puntos de interrupción son ampliaciones de pantalla específicas donde cambia el diseño o el estilo de la página web para garantizar que el contenido se vea bien en diferentes tamaños de pantalla o en diferentes dispositivos ¿Bien? Entonces son como una regla que decide cómo se adaptará tu diseño a diferentes tamaños de pantalla. Déjame darte un ejemplo. Entonces aquí puedes ver, estos son todos los puntos de interrupción, ¿de acuerdo? Estos son todos los puntos de interrupción predeterminados. Y estos son cinco que existen por defecto viento de cola. Entonces cuando dices SM, básicamente estás diciendo que el ancho mínimo de la pantalla debe ser de 640 píxeles. ¿Bien? Cuando estás diciendo MD, estás diciendo que el ancho mínimo debe ser de 768 píxeles. Para LG, el ancho mínimo es 1024. Para Excel es 1280. Para dos Excel, es de 1536 píxeles. Y este es el CSS correspondiente, ¿de acuerdo? Entonces esto se define por defecto Y. Ahora bien, si quieres agregar una clase o si quieres agregar un tipo específico de elemento de diseño o algún tipo de CSS a ciertos tamaños de pantalla, lo que necesitas hacer es usar estos puntos de interrupción como prefijo. Para que puedas ver por aquí. Aquí, hay un ejemplo de etiqueta de imagen de imagen, y estás diciendo un ancho de imagen de 16. ¿Bien? Entonces ancho de 16 es el ancho por defecto. Ahora, cuando dices MD colon ancho 32, como W 32, 32 será el ancho en pantallas medianas, o y 48 en las pantallas más grandes. Bien. Así que las pantallas más grandes significan 1024 píxeles y superiores. Pantallas medianas significan 768 píxeles y superiores. Bien, así es como se maneja esto. Entonces este prefijo MD y LG asegura que dependiendo la definición de punto de interrupción que exista, bien, estos CSS se apliquen condicionalmente dependiendo del tamaño del dispositivo Y si, antes de esto, antes de hacer uso de todo esto, tienes que asegurarte de haber agregado una metaetiqueta view pot en el documento principal. ¿Bien? En la cabecera de su documento, lo siento. Así que básicamente, si vienes aquí en nuestra aplicación, ¿de acuerdo? Y si vas a index dot HTML, necesitas tener este viewpot por aquí, que está presente por defecto ¿Bien? Pero si algo no está funcionando, puedes cruzarlo, ¿de acuerdo? Pero esto tiene que estar presente. Y así es como funciona. Entonces espero que esto tenga sentido , ¿de acuerdo? Y esto funciona para cada clase de utilidad en el marco. Entonces hay clases definidas justo en viento de cola. Estas son todas las clases. Derecha. Y puedes usar este prefijo o estos puntos de interrupción con cualquier tipo de clases Se puede ver. Eso es lo que significa. ¿Bien? Así que puedes cambiar literalmente cualquier cosa en un punto de interrupción dado, incluso cosas como espaciado entre letras o estilos de cursor ¿Bien? Ahora bien, aquí hay un ejemplo básicamente que han dado. Bien, puedes cambiar el tamaño de la pantalla, puedes ver cómo cambia esto. Entonces esto está usando completamente el viento de cola, se puede ver cómo cambia esto Y aquí básicamente tienes el CSS también. Se puede ver. Entonces, por defecto, el tif exterior es bloque de pantallas, pero al agregar MD flex, se convierte en display flex en pantallas medianas y más grandes. Entonces, si el tamaño de la pantalla se vuelve mediano o más grande, se vuelve flex, puedes ver, ¿verdad? Entonces así es como controla. Se puede ver que también se está agregando el encogimiento. Bien. Entonces, para evitar encogimiento en pantallas medianas y más grandes, ha hecho uso de encogimiento MD de cero. Bien. Entonces sí, esto es lo que pasa por aquí. Ahora aquí puedes ver, bien, tailwind usa el sistema de primer punto de interrupción móvil, lo que significa que puedes, similar a lo que podría usarse para otros frameworks como Bien. Lo que esto significa como utilidades sin prefijos Entonces, si estás haciendo uso de mayúsculas. Bien, esto tendrá efecto en todos los tamaños de pantalla mientras que los que están prefijados. Entonces, si estás prefijando la mayúscula con MD, solo se llevará a cabo en un punto de interrupción especificado Ahora para MD, ¿qué es un punto de interrupción? Para MD, el punto de interrupción es de 768 píxeles y superior. ¿Bien? Entonces se llevará a cabo o se aplicará. Si usa MD MD colon por caja, se aplicará solo encima de esos tamaños de pantalla y superiores, ¿de acuerdo? Así que aquí se puede ver, se puede ver por aquí, div clase SM centro de texto. Por lo que esto solo se centrará en las pantallas superiores a 640 píxeles y más anchas, no en tamaños de pantalla pequeños. ¿Bien? Ahora, centro de texto, esto centrará el texto en el móvil y lo alineará a la izquierda en pantallas como 640 píxeles y más anchas. Bien, entonces así es como puedes hacer uso de, puedes pasar por todo esto. ¿Bien? Ahora, una cosa increíble es que también puedes personalizar tus puntos de interrupción Bien, entonces te lo dije, esto es lo que proporciona Tailwind por defecto Lo que proporciona el viento de cola por defecto. Ahora, digamos para mi aplicación, voy a definir un tamaño diferente para MD, LG, y quiero tener mi propia personalización. Así podrás personalizar, si te desplazas hacia abajo aquí, puedes personalizarlo, para que puedas tener bajo tema en conflicto de viento de cola tiene Puedes tener pantallas, y puedes definir tus propias definiciones de pantalla aquí. Bien. Puedes definirlo de la manera que quieras. Por lo que la tableta es de 640 píxeles. La computadora portátil es de 1024 píxeles, escritorio es de 1280 píxeles. ¿Bien? Y hay un documento adicional para personalizar los puntos de interrupción Entonces aquí puedes ver cómo puedes personalizar las pantallas. Bien. Incluso puedes personalizar los valores predeterminados. Puedes agregar estos son los predeterminados. Estos son puntos de interrupción predeterminados que se agregan. Puedes personalizarlos si lo necesitas. ¿Bien? Puede anular una sola pantalla. Entonces, por ejemplo, si quieres anular a LG, el punto de interrupción para pantallas grandes, puedes hacerlo así con solo especificar LG Puede agregar nuevos puntos de interrupción como tres Excel. Entonces entra en dos Excel. Pero si quieres agregar tres Excel, puedes hacerlo. ¿Bien? Todo esto es personalizable. Depende totalmente de ti y puedes aprovecharlo de esta manera entonces. Sea cual sea el nombre que hayas dado sobre tu tablet, puedes usarlo de esta manera. Entonces es así de increíble. ¿Bien? Simplemente pasa por esto pasar por este arbitrario lo siento, no arbitrario. Simplemente repasa esta documentación por aquí, y aprenderás un poco sobre esto. También tomaremos esto en acción. Entonces lo que voy a hacer es cambiar a mi base de código. Bien, aquí lo que vamos a hacer es que en realidad vamos a ver cómo podemos personalizar o cómo podemos construir diseños responsivos. Eso es lo que vamos a aprender aquí. Bien. Entonces primero lo primero, lo que voy a hacer es que voy a cerrar esto. Voy a entrar en app dot Jex. Aquí no tengo nada. Voy a agregar Dev por aquí, algo así. Bien. Entonces se agrega DV. Voy a decir el nombre de la clase. Vaya, nombre de la clase. Voy a decir PG de cra de 100. ¿Bien? Y voy a decir P guión cuatro Bien. Entonces esto es algo que voy a hacer, y voy a añadir una lista por aquí. Así que permítanos agregar una lista y veamos cómo puede hacer estos elementos de la lista sean receptivos. ¿Bien? Entonces voy a decir el nombre de la clase. Vaya, nombre de clase como lista ninguno. Bien, entonces voy a decir lista. Ninguno por aquí, se puede ver. Bien. Y voy a añadir los elementos de la lista, así que voy a decir LI por aquí. Diré el punto uno. Bien, punto uno. Voy a copiar esto. Bien. Diré copiar el ítem uno, ítem dos, y el ítem tres, básicamente, agregaré. Bien, entonces esto será dos, y éste será tres. Ahora si guardo esto, verán el ítem uno, dos, tres. Si me deshago de esta clase, verás que se agrega el ítem uno, dos, tres. Estás viendo un color de fondo claro debido al CSS que he aplicado en la parte superior. Bien. Entonces estos son elementos de lista. Si agrega la lista de nombres de clase ninguno, se convertirá en algo sin lista. Ahora lo que voy a hacer es agregar algo de CSS por aquí. Diré el nombre de la clase. Diré BG azul por aquí. Bien. Puedo decir BG azul de 500. Puedo decir texto blanco. Y puedo decir P dos, relleno dos, y voy a decir LG redondeado, algo así. Bien, puedes ver que este primero se convirtió en cosa estilo botón. Bien. Voy a copiar el CSS, y voy a aplicar a los tres por aquí. Entonces lo agregaré por aquí, y lo agregaré por aquí. Bien. Ahora déjame mostrarte un problema. Entonces, si voy en tamaño de pantalla más grande así, está desperdiciando innecesariamente el lado derecho, ¿verdad? Es desperdiciar innecesariamente el lado derecho de la pantalla porque este botón apenas se está estirando así. No es bueno. Entonces en pantalla más grande, quiero tenerlos apilados horizontalmente. Bien. Y en pantalla más pequeña, esto se ve bien. En pantalla más pequeña, tiene que ser vertical. Eso está bien. Bien. Entonces ahí está también puedo agregar margen por aquí. ¿Bien? Puedo decir margen de dos, así. Bien. Margen de dos es mejor, me parece. Déjame añadir eso. Bien. Sí, margen de dos. Ahora esto está apilado verticalmente. Esto se apila verticalmente nuevo en una pantalla más grande o más grande. Este diseño está bien, pero está bien para móviles, diría yo, pero el desperdicio es un espacio horizontal en pantallas más grandes, y no está haciendo un uso eficiente bienes raíces de la pantalla, ¿verdad? Ese es un problema que entiendes. Entonces lo que voy a hacer es que voy a agregar algo de CSS por aquí. ¿Bien? Entonces, lo primero que haría es que vendría por aquí y agregaría algunas clases. Diré MD. ¿Bien? Entonces para dispositivos medianos, Bien, dispositivos medianos y mayores, voy a decir colon, pix Px de cuatro. Bien. Y si, esta única cosa voy a agregar. Y en la parte superior por aquí, cuando estamos especificando el tipo de lista de ninguno, lo que voy a hacer es, voy a decir MD, ClinoopsFlex Lo cambiaré a flex. Básicamente, la caja flex o una caja flexible horizontal en pantalla de tamaño mediano o una pantalla más grande. ¿Bien? Y voy a decir MD de gorra de cuatro. Básicamente estas dos clases se aplican en tamaños de pantalla más grandes. Así se puede ver en el tamaño de pantalla pequeña, no pasa nada para cambiar, ¿verdad? Pero vamos a arrastrar esto. Bien, ya se puede ver cambiado de pequeño a grande. Se puede ver antes esto no estaba pasando. ¿Bien? Entonces están viendo brecha por aquí, la brecha entre botones porque he agregado esta brecha de cuatro. Si me deshago de esto, se ve que se reduce la brecha. Si agrega MD gap cuatro, esto va a venir. ¿Bien? Entonces, para cierto tamaño de pantalla, esto aparece. Y es bonito se puede ver esto y en mayor tamaño de pantalla, lo es. Entonces, si estás viendo el sitio web, la misma aplicación en escritorio, aparece apilada horizontalmente. Pero en un tamaño de pantalla más pequeño, se apila verticalmente. Ese es el ritmo de aquí. ¿Bien? Entonces, para resumir, lo que estamos haciendo aquí es que estamos convirtiendo la lista desordenada de aquí en un cuadro horizontal en pantalla de tamaño mediano, bien, Y esto lo estamos haciendo con la ayuda de MD colon. ¿Bien? Este es un punto de interrupción que se define en el CSS de viento de cola, y estamos haciendo uso de él, ¿de acuerdo? Entonces espero que hayas podido seguir adelante, y espero que tengas una buena claridad en cuanto a cómo funciona esto. Ahora, te voy a mostrar una cosa más. Te mostraré cómo puedes configurar o agregar algún tipo de tema personalizado a tu viento de cola Entonces digamos que tengo estoy trabajando para una gran empresa, y hay un esquema de color predefinido que quiero que mi aplicación refleje. Bien, así puedo hacer uso de eso. Bien, y no hay daño en personalizar esto. Así puedo ir a paleta de colores, bien, en línea. Bien, y puedes ver por aquí, estas son la paleta de colores. Digamos, voy a elegir este tipo de azul por aquí. ¿Bien? Y voy a venir aquí a tailwind confit CSS Lo que puedo hacer aquí en extender, voy a tener colores, así. Bien. Diré Colin, algo así Bien, a la coma por aquí. Y aquí, voy a decir, uh, Custom blue. Este es mi azul. Bien. Eso estoy especificando, voy a decir Colin y voy a añadir esto algo así Este es un azul personalizado. Y ahora en vez de azul por aquí, estoy haciendo uso del azul, azul normal, ¿verdad? Entonces lo que voy a hacer es que voy a venir aquí. En lugar de BG blue, 500, puedo hacer uso de azul personalizado por aquí. Diré azul personalizado. Se puede ver BG custom blue ha entrado en sugerencia. Puedo ver si esto. Bien, esto no se ve tan genial. Bien. Probablemente necesito hacer un reinicio porque creo que cambié la configuración y no se está recogiendo. Entonces déjame reiniciar y déjame refrescarme, bien. Entonces un problema que veo por aquí, la razón por la que esto no se está aplicando es que me he perdido el hash por aquí. Bien, entonces los códigos de color deberían comenzar con hash. Y en el momento que guardes esto, lo verás aquí arriba. ¿Bien? Entonces no hay necesidad de reiniciar. En el momento en que cambias cualquier tipo de configuración por aquí, se aplica la moda pita Y se puede ver que este es un azul diferente al que teníamos inicialmente. Así puedo agregar mi propio tema personalizado por aquí, o Sin ningún problema. Y puedo hacer uso de ella por aquí de la manera que yo quiera. Se puede ver que el color también está entrando. También es auto sugiriéndome desde este enchufe que estoy haciendo uso del intellisense Es tan increíble que lo está recogiendo del archivo de configuración y me lo está mostrando. Sabe que he configurado un color personalizado por aquí. Si guardo esto, se puede ver el color que se está cambiando. Ahora bien, este es un azul personalizado que tengo y no lo que estaba preexistente. De esta manera puedes personalizar literalmente muchas cosas por aquí. Puedes construir tu propio tema por aquí, ¿de acuerdo? Y puedes definir tus propias fuentes, tu propio tema, y puedes hacer uso de él en todas partes de la aplicación sin dudarlo. Por supuesto, existe una biblioteca predeterminada muy buena que existe. Pero cuando estás trabajando en la aplicación de grado de producción, este es un escenario común en el que hay un cierto conjunto de colores que las empresas querrían usar, y querrían reflejar los colores de su marca en la aplicación. Y esos colores de marca podrían no estar ahí por defecto, y es posible que quieras agregarlos aquí. Entonces así es como agregarías y se puede usar en todo el proyecto. Espero que esto haya sido valioso y espero que esto te guste. 6. PROYECTO: crea una cuadrícula de cartas dinámica con filtros con React y CSS de Tailwind: Ahora, la implementación del modo oscuro, modo de luz es una de las características comunes que las aplicaciones web modernas tienen hoy en día. Si estás trabajando en una configuración de creación de producción, es muy probable que tu jefe te pida que agregues esta función a la aplicación existente que están usando los usuarios. Esta es una característica increíble en la que el usuario puede alternar el tema en función de sus preferencias. Eso es lo que exactamente te voy a mostrar en este video en el que vamos a construir un pequeño proyecto que estás viendo en la pantalla, lo que nos va a ayudar a alternar entre el modo oscuro y el modo claro. Entonces aquí, esta es la aplicación. No hay mucho de un diseño. Es bastante simple. He agregado algo de texto por aquí a propósito para que puedan ver cómo cambia el color del texto dependiendo del tema, y tengo un elemento de patrón Ahora puedes desactivar el modo oscuro por aquí. Se puede ver el modo de luz y el color del texto cambia a negro y el fondo es blanco. Puede habilitar el modo oscuro. Así que desactiva nm puedes alternar entre estos dos modos. Y esto básicamente se almacena localmente, esta preferencia. Puedes refrescar esto y seguirás en modo oscuro. Si habilitas el modo oscuro, o si deshabilitas el modo oscuro, y si refrescas seguirás en modo claro, porque esa es una preferencia que has seleccionado. Bien. Entonces las preferencias también se almacenan en el navegador del usuario usando almacenamiento local, y eso exactamente cómo hacer esto exactamente es lo que te voy a mostrar. Ahora para implementar el mismo head over to tail wind documentación CSS y hacer una búsqueda rápida por aquí y buscar el modo oscuro. ¿Bien? Ahora, cómo llegar a la documentación, te voy a mostrar. Entonces en el sitio web, puedes venir por aquí y decir empezar o también puedes buscar por aquí. Puedes decir modo oscuro por aquí, y vendrás por aquí. Bien. Así que te sorprenderá ver que tiene un soporte predeterminado para el modo oscuro ¿Bien? Entonces dice, uh, viento de cola te permite hacer uso de esta función, y cómo puedes hacerlo es que puedes habilitar así Se puede decir modo oscuro modo de luz. Entonces lo que hace es que básicamente te permite incluir una variante oscura. Entonces dice que el viento de cola incluye una variante oscura que te permite estilizar tu vista de manera diferente cuando se habilita Así podrás añadir dos puntos oscuros y la combinación de colores o el estilo que quieras tener cuando el modo oscuro esté habilitado. Así que puedes hacer esto por aquí. Se puede decir oscuro. Entonces en modo oscuro, quiero tener fondo como pizarra. Bien. Y en modo oscuro, quiero tener texto como blanco. El color del texto debería ser este también. ¿Bien? Esto es algo que puedes definir. Y luego en tailwind CSS, lo que puedes hacer es, perdón, no tailwind En el archivo de configuración, lo que puedes hacer es tener que hacer un pequeño retoque al archivo de configuración Entonces en el archivo de conflicto, solo hay que agregar este modo oscuro, enfriamiento y selector. Ahora selector será clase por aquí en nuestro caso. Te voy a mostrar cómo puedes implementar esto. Bien. Y siempre que digas clase, bien, básicamente alterna sobre la base de este CSS que hayas aplicado Entonces déjame implementar esto y mostrártelo, pero esta es una documentación que quería destacar. ¿Bien? Se puede ver por aquí. Todo el código se da por aquí, ¿de acuerdo? Simplemente puedes echarle un vistazo a esto. Bien. Simplemente me gustará cambiar aquí a IDE. Literalmente no se agrega ningún código en este momento. Entonces estaremos empezando a escribir algún código que nos ayude a implementar. ¿Bien? Entonces lo que voy a hacer es aquí, antes que nada, en Dev, diré nombre de clase. Bien. Voy a añadir algunas clases. Diré relleno de cuatro. Bien, BG de blanco. Entonces este es un fondo predeterminado. Bien. Y voy a añadir mínimo H pantalla. Bien. ¡Uy! Algo así. Bien. Y por aquí, voy a decir cada uno, ¿de acuerdo? Y aquí voy a decir, bienvenido a Talk. Modo. App algo así. Bien. Y aquí puedo decir que nombre de la clase es texto, Iphone a Excel. ¿Bien? Puedes ver la aplicación “welcome to dark Mode”. Bien. Y voy a hacer agrego de PTAC, y voy a decir que este es un ejemplo de implementar el modo oscuro usando viento de cola CSS. Bien. Para que veas que esto ha entrado. ¿Bien? Ahora, lo que vamos a hacer es que vamos a estar agregando un componente que nos permitirá alternar por aquí. Bien. Entonces voy a decir aquí voy a llamar a esto como el modo tar toggle. Este componente no existe, pero podemos crear primero el componente. Eso es algo que puedo hacer. Puedo decir modo oscuro, toggle, sexo por aquí, y puedo decir const Básicamente, este componente tendrá toda la lógica. Entonces puedo decir función const, y modo oscuro, toggle, algo así, y voy a tener Voy a hacer uso de las funciones de flecha por aquí. Ahora bien. Yo solo bien, si, creo, bien, cometí un error de sintaxis aquí. Yo sólo me desharé de esto. Bien. Entonces sí, esto está bien. Y ahora voy a decir export, default, talk more toggle, algo así. Bien, y voy a conseguir esto importado por aquí. Diré t, más toggle. Así. Bien. Ahora voy a empezar a agregar algo de código por aquí. Entonces lo que vamos a hacer es aquí, voy a añadir un botón. Bien. Entonces, antes que nada, diré que regresen, ¿de acuerdo? Regresa por aquí y aquí. Diré que devuelva un botón. Entonces necesitamos un botón que vaya a controlar el toggle para esto. ¿Bien? Entonces el botón va a tener oscuro. Entonces este es un texto. Voy a cambiar este texto, pero por ahora, tengamos este texto. Bien. Primero voy a ver el nombre de la clase. Bien, nombre de la clase. Voy a tomar esta nueva línea. Bien. Ahora bien, ¿cuál es el nombre de clase que quiero especificar? Diré P dos, PT de gris 200. Bien, gris de 200, y voy a decir texto de scree de texto gris es de 800 letra C, y creo que esto es todo, creo, redondo wt Voy a añadir ronda por aquí. Bien, entonces este es el botón que tenemos. Bien, aún no pasa nada en el click, pero voy a agregar al click Lesner Entonces al hacer clic, lo que tenemos que hacer es que tenemos que establecer el modo theta, habilitar y deshabilitar, básicamente Bien. Y para eso, voy a hacer uso del estado E. Voy a necesitar un estado por aquí dentro de la función. Bien, entonces voy a decir const, o y voy a decir que es modo TAC, y voy a decir set es modo TAC Entonces esta es la Bien, esta es la función, lo siento, no la función. Esto es estado. Voy a decir usar estado. Y voy a decir por aquí. Entonces vamos a hacer uso del almacenamiento local, ¿de acuerdo? Así que estoy diciendo por aquí. O algo así. Bien. Entonces digamos dentro de nosotros estado, voy a añadir la función de flecha. Y aquí, voy a decir vuelta. Bien, almacenamiento local, punto, Obtener artículo. Entonces estoy haciendo uso del almacenamiento local, y esta es la clave de aquí. Entonces, qué tema ha aplicado el usuario, eso es lo que estoy obteniendo del almacenamiento local. Bien Y voy a decir que es igual a oscuro. Entonces si esto es oscuro, esto será cierto, de lo contrario, esto va a ser falso y de hecho me puede gustar, tener esto una cadena. ¿Bien? Y voy a tener una comparación estricta. Bien. Así que esto está hecho, ¿de acuerdo? Tenemos un estado ahora, y lo que voy a hacer por aquí es hacer clic, puedo decir, así que cuando el usuario haga clic, voy a decir por aquí, así. Bien. Y aquí, déjame que me quite esto. Diré que set es modo oscuro. Y revertiré lo que sea que haya en modo Stark. ¿Bien? Entonces esto va a asegurar que el valor siempre se revierta al hacer clic Por lo que siempre se activa cuando haces clic en esto. Eso es lo que esto va a asegurar. Ahora lo que voy a hacer es que voy a tener E use efecto gancho por aquí. ¿Bien? Ahora, todo esto, como dije, está siendo controlado por este selecto de aquí. Esta variante oscura. Lo que quiero decir es. Entonces necesito agregar la variante oscura por todas partes. ¿Bien? Entonces lo que voy a hacer es primero lo primero. Voy a añadir esto al propio botón . Entonces voy a venir aquí. Y aquí en el botón, voy a decir por aquí, oscuro es oscuro, Colin, BG, gris, y voy a tener G gris de digamos 900, bastante oscuro Y entonces puedo tener oscuridad. Necesito tener texto también. El texto es texto blanco blanco, algo así. Esto está hecho. Ahora al click, si esto cambia, lo que tenemos que hacer es hacer uso del efecto de uso. Entonces voy a hacer uso del gancho de efecto de uso por aquí. Déjame expandir esto un poco, usa efecto. Ahora, ¿qué hacemos en efecto de uso? Voy a voltear esto sobre la base del cambio de valor en el modo es oscuro. Entonces, ¿cuál es la sintaxis para el efecto de uso? Vamos a tener algo así. Tenemos una función, sintaxis, y tenemos una matriz de dependencias. Ahora, array de independencia, lo que necesitamos es modo oscuro. Entonces, cuando este valor cambie, ejecutará este efecto de uso. Ahora dentro de esto, necesitamos tener la lógica. ¿Bien? Entonces voy a decir documento, punto, elemento documento, lista de clases de puntos. Bien. Entonces voy a agregar esta clase llamada TAC. Voy a decir tot, agrega porque oscuro es la variante, ¿verdad? Entonces voy a decir por aquí, TAC algo así. Entonces lo que hará es que agregará la variante oscura en todas partes. Bien. Y también actualizaré el almacenamiento local. Diré almacenamiento local, artículo de conjunto de puntos. Bien. Diré equipo Así que revertiré el valor de ellos. Voy a decir Tak algo así. ¿Bien? Deshazte de esto. ¿Bien? Entonces esto está hecho. Esto está bien, tenemos que hacer esto tenemos que correr condicionalmente, así que tenemos que decir si el modo oscuro Yo es modo oscuro, algo así. Entonces déjame. Si yo modo oscuro es cierto, hacemos esto. Necesito ejecutar el bloque else. Voy a copiar esto. Voy a ver más por aquí y voy a remontar esto. Ahora bien, si esto está ahí, voy a decir lista de clases, punto, eliminar elemento documento lista de clases punto eliminar oscuro por aquí. Bien, entonces esto agregará oscuridad y esto eliminará oscuridad. Y aquí, voy a decir luz. Espero que esto tenga sentido. Ahora vamos a probar esto. Veamos cómo funciona esto. Déjame colapsar esto ya ves. Vaya, esto no va a funcionar. Entonces esto no va a funcionar porque no he agregado esto a mi configuración. Tengo que ir por aquí. Voy a venir aquí. Diré modo oscuro, vaso de colon. Bien. Déjame ver. Bien, alcance inválido, dice, Bien, hay un problema y el problema es probable que esté en la sintaxis. Bien, entonces esto sería en un solo código. Y ahora si ves, puedes ver, está cambiando. Entonces lo que está sucediendo es dependiendo del valor de es modo oscuro, la clase está siendo aplicada y eliminada. Sí, puedes ver esta clase de toda la lista de clases, dark está siendo aplicada y eliminada. Dependiendo de cuál sea el valor que hay por aquí. ¿Y qué es oscuro? Oscuro es esto. ¿Bien? Ahora bien, lo que podemos hacer es aplicarlo en todas partes. También podemos aplicar esto en app dot JSX. Bien. Lo que voy a hacer es en app.j6, voy a agregar antecedentes Bien. Entonces aquí en DIV aquí en Dev puedo decir oscuro, bien, oscuro de Colin Puedo decir PG gris BG gris de digamos 900, un poco oscuro. Diré que oscuro es texto de blanco. Texto de blanco, algo. Bien. Yo hice esto y ahora vamos a ver el modo oscuro, ves, está alternando ahora, ¿verdad Entonces esto es lo que construimos. Y si vienes por aquí, si lo ves en pantalla completa, esto es lo que es la aplicación . Se puede ver. Incluso si refrescas, porque estamos haciendo uso del almacenamiento local. Ahora te voy a mostrar cómo se está almacenando en el almacenamiento local. Buena inspección, clic derecho inspeccionar, ir a la aplicación y pasar por aquí en almacenamiento local. Entonces, si me alejo un poco aquí en almacenamiento local, tienes este host local 1573 Entonces verás el valor de ellos por aquí. Entonces aquí es donde estamos almacenando. Entonces esto va a cambiar. Se puede ver. Entonces se está almacenando por aquí. Y si borras las cookies y todo así esto se eliminará. Estamos haciendo uso del almacenamiento local básicamente para implementar el modo oscuro. Bien. Espero que esto tenga sentido. Entonces, para resumir, el viento de cola tiene esto en soporte incorporado para el modo oscuro, E incluye una variante oscura la que puedes hacer uso de esta manera. Para que puedas implementar lo que todos los estilos quieras tener usando la variante oscura, ¿bien? Y luego aquí en el modo oscuro, se puede decir selector. Entonces selector es clase por aquí, ¿de acuerdo? Así se puede ver que la estrategia de selector reemplazó a esta estrategia de clase. Bien, entonces esta es la estrategia selectora en estos momentos. Esta es la última actualización más reciente por aquí. Entonces, si hago uso del selector por aquí, veamos si esto funciona. Bien, así puedo actualizar esto con selector. Puedes ver Bien, entonces en realidad, está en la última versión, se supone que se debe usar el selector. ¿Bien? Estaba usando clase, pero la clase también está bien, ¿de acuerdo? Pero selector es algo que puedes usar. Eso está perfectamente bien. ¿Todo bien? Porque creo que clase selecta no será válida en la próxima versión. Así que asegúrate de hacer uso del selector, ¿de acuerdo? La clase también es la misma. Significa lo mismo. Y se puede ver que esto va a ser de color blanco. Bien, si el modo oscuro no está habilitado, y si el modo oscuro está habilitado, entonces lo que va a pasar es que esto sucederá. Entonces lo que sucede es cuando habilitas el modo oscuro, bien, hay esta clase agregada a HTML, que se llama dark. Ahora bien, cuando esto se aplica, todo en la oscuridad está siendo aplicable, y esto ya no es válido, ¿de acuerdo? Entonces se agrega esta cosa, se agrega este atributo, y es por eso que ves toda la aplicación se vuelve oscura porque tienes selectores oscuros por todas partes Estás haciendo uso de estos selectores en todas partes, ¿verdad? Entonces, donde quiera que hayas definido algo usando oscuridad, eso lo muestra ¿Bien? Entonces sí, así es como funcionan las cosas, y espero que hayan disfrutado construyendo esta pequeña aplicación en modo oscuro. Todo bien. Entonces espero que esto haya sido útil. 7. Conclusión del curso: Bueno, enhorabuena por completar este curso. Ha recorrido un largo camino para dominar la integración de CSS de viento de cola y reaccionar para construir aplicaciones receptivas, personalizables y visualmente impresionantes Desde configurar tu proyecto hasta implementar funciones avanzadas como el modo oscuro, ahora tienes las habilidades para diseñar aplicaciones web modernas que se ven geniales en cualquier tamaño de pantalla. Tu proyecto final, una aplicación de reacción completamente funcional con modo oscuro es un testimonio los conocimientos prácticos que has adquirido en este curso. Recuerda, el CSS de viento de cola no se trata solo de ahorrar tiempo, se trata de darte libertad creativa y simplificar diseños complejos también Te animo a que sigas experimentando con características de viento de cola y aplicarlas en tus proyectos futuros Además, comparte el trabajo con la comunidad y no dudes en volver a visitar las lecciones si necesitas un repaso. Con este curso, encontrarás un proyecto de clase al que podrás echar un vistazo y compartirlo con toda la clase para la retroalimentación. Gracias por realizar este viaje con nosotros. Estoy muy feliz de ser parte de este viaje en particular, y no puedo esperar a ver las aplicaciones que construirás con React y Tailwind CSS La mejor de las suertes y feliz codificación.