1 00:00:02,290 --> 00:00:05,889 well in this video we are going to finish configuring everything 2 00:00:08,330 --> 00:00:15,250 the bayern react that we had already configured in the previous video now what we are going to do is 3 00:00:15,250 --> 00:00:21,870 configure well finish configuring it to clean files that here because they are not going to 4 00:00:21,870 --> 00:00:25,929 be worth anything to remember always within the client folder 5 00:00:25,929 --> 00:00:37,509 and configure the Tilewind. What is Tilewind? It is a framework that will serve us to 6 00:00:40,369 --> 00:00:51,990 put classes that are already made from Tilewind. So we can import 7 00:00:51,990 --> 00:00:58,990 those classes and use them and customize them modify them and play with the classes with 8 00:00:58,990 --> 00:01:07,590 classes that are made in css in a fast way and that is how it is done currently in 9 00:01:07,590 --> 00:01:18,390 companies ok then the first thing because as I told you in the previous video I am going to activate I am going to 10 00:01:18,390 --> 00:01:29,430 to start the containers, we would already have the backend in operation, I am 11 00:01:29,430 --> 00:01:38,780 inside the client folder and then here we are going to do the npm run d, okay, we already have 12 00:01:41,439 --> 00:01:46,099 the front activated so if we go to our web 13 00:01:46,099 --> 00:01:54,920 and we put localhost 5173 and we update it, we already have it here, okay, we already have it here, 14 00:01:54,920 --> 00:02:03,319 well, we do not want these logos or this script or anything of what is here, okay, then we are going to 15 00:02:03,319 --> 00:02:11,599 clean this and we are going to put the style sheets in the framework of the tailwind, well then 16 00:02:11,599 --> 00:02:28,300 lo primero vámonos a la página de tailwind pues aquí vamos a meter google tailwind voy a entrar 17 00:02:28,300 --> 00:02:36,060 en que te start a aquí voy a utilizar el framework vale las guías y aquí me da pues bueno diferentes 18 00:02:36,060 --> 00:02:42,259 formas de trabajar con tailwind vale o de importar tailwind a estas tecnologías nosotros vamos a 19 00:02:42,259 --> 00:02:48,620 work with bit then we are going to give bit and here we see a series of steps that we have 20 00:02:48,620 --> 00:02:56,960 to follow ok then this one to create your project this one we already have it ok this would be to create 21 00:02:56,960 --> 00:03:04,939 the client folder ok then we already have that we would start from step 2 ok and before 22 00:03:04,939 --> 00:03:11,539 doing this we are going to clean a little of those files that have been created in the previous video 23 00:03:11,539 --> 00:03:19,699 these files all those that we had everything that we have here then we are going to start 24 00:03:19,699 --> 00:03:34,580 with the one of app js here you are ok in src app js x ok in app js x 25 00:03:36,780 --> 00:03:42,960 well here is where that page appears that the browser visualizes us ok here we have 26 00:03:43,939 --> 00:03:53,479 los diferentes las diferentes imágenes con target vale el set down bueno todas las historias que 27 00:03:53,479 --> 00:03:59,379 vemos en el navegador entonces todo esto ahora mismo no me vale para nada así que 28 00:03:59,379 --> 00:04:04,080 voy a y lo voy a borrar vale y aquí vamos a meter 29 00:04:04,080 --> 00:04:16,980 un componente básico rfc vamos a instalar antes a ver si no a ver si no me lo reconoce por la 30 00:04:16,980 --> 00:04:25,680 extensión vamos a instalar una extensión que se llama bueno pues el tailwind tailwind está 31 00:04:25,680 --> 00:04:47,680 We install, okay, we already have it here, okay, this is so that we go into the different classes, in theory, I would not need for this that I was going to do now, well, I would have to look for the RFC class, that this is well written, but it doesn't do it for me, 32 00:04:47,680 --> 00:04:57,680 I'm going to write everything, let's put a function 33 00:04:57,680 --> 00:05:03,949 app, and within that function 34 00:05:03,949 --> 00:05:09,949 I'm going to put a return 35 00:05:09,949 --> 00:05:13,949 I wrote this wrong 36 00:05:13,949 --> 00:05:17,949 this parenthesis goes here 37 00:05:17,949 --> 00:05:32,860 it goes here, good man, so it is worth then we are going to put the app function and that it returns to us 38 00:05:36,660 --> 00:05:38,459 for example that a div returns to us 39 00:05:41,980 --> 00:05:48,839 that it puts app is worth then we change it or what is needed is worth in principle this and we are going to put 40 00:05:48,839 --> 00:05:54,959 here a sport as always tefao 41 00:05:56,680 --> 00:06:04,660 ok because then this from other files you call it ok this one I'm going to leave it like this ok 42 00:06:06,160 --> 00:06:17,300 what else we have the fichero ppcs ok this file acts on the pp jsx but since 43 00:06:17,300 --> 00:06:22,399 we have erased everything we no longer import this file then all these classes all these things 44 00:06:22,399 --> 00:06:28,459 css do not work for me at all so this one I can take it and delete it directly 45 00:06:30,360 --> 00:06:38,800 ok we have another file of style sheets that is the css index this one we will need later 46 00:06:38,800 --> 00:06:45,600 then this file is not erased what is done is to clean it ok because we the classes 47 00:06:45,600 --> 00:06:56,220 that we are going to use is that of the tailwind framework, then you can have all this there 48 00:06:56,220 --> 00:07:02,459 as a reference if you want and that but right now it is not worth it at all so I am going to and I am going to delete 49 00:07:04,800 --> 00:07:15,620 it and for now I am going to leave it clean ok we have the main j s x j s x is left 50 00:07:15,620 --> 00:07:22,579 script is the union of javascript and ajax is worth if you do not ask well and we are going to leave this 51 00:07:22,579 --> 00:07:31,920 right now so it is worth where we call the app that we are creating well it is like the connection 52 00:07:31,920 --> 00:07:46,490 with app js x ok well then ok let's start good with this I would already have clean 53 00:07:46,490 --> 00:07:53,569 the files ok the ones that I will need and we are going to start with the configuration I am going to close 54 00:07:53,569 --> 00:08:01,990 everything with the configuration that they tell me from the technical documentation to install 55 00:08:01,990 --> 00:08:08,490 tailwind css then the first thing he tells me is the first thing we have to do is install 56 00:08:08,490 --> 00:08:20,079 these three modules then we copy and I'm going to come here I'm going to stop the service is worth the front 57 00:08:25,560 --> 00:08:30,779 and I put the npm install the minus of the time wing as it is worth what I have copied from 58 00:08:30,779 --> 00:08:39,620 the technical documentation and there it starts to load the modules as always 59 00:08:41,340 --> 00:08:48,879 and we are seeing in the meantime the following says initialize the tailwind, that is, right now we already 60 00:08:48,879 --> 00:08:56,159 have the packages, the modules that I need are already there, now what I need is to initialize 61 00:08:56,159 --> 00:09:05,440 is that framework ok then we are going to put now instead of npm npx ok well this we are going to 62 00:09:05,440 --> 00:09:18,100 do copy and paste well and it tells me ok I have created two files one that is the tailwind.com 63 00:09:18,100 --> 00:09:26,500 fix j s and another that is the post css point with fix j s is worth that we have them here there is wind and the 64 00:09:26,500 --> 00:09:34,419 post css is worth we are going to technical documentation and here it tells me well the first thing you have to 65 00:09:34,419 --> 00:09:43,980 do is in tailwind with fix j ss you have to paste this in the html index what you are saying is 66 00:09:43,980 --> 00:09:51,559 that adds all the files that these extensions have, they have to respond to 67 00:09:51,559 --> 00:10:00,419 tailwind, okay, then I put this in the content and also html recognizes it, it is worth the index point 68 00:10:00,419 --> 00:10:09,980 html copy we are going to come then it is to the tailwind config it is worth that this is this and in content 69 00:10:09,980 --> 00:10:22,100 we are going to give control ok the formatting is already there and it would already have it ok we already have it as 70 00:10:22,100 --> 00:10:26,360 it asks us here ok what else do we have to do 71 00:10:26,360 --> 00:10:46,899 Well, let's see, the 3 would already be there, it says add taiwin directives to your css, okay, to my css index, 72 00:10:46,899 --> 00:11:00,990 okay, then we are going to copy this and we are going to put these directives, ctrl c, okay, this is good, they are 73 00:11:00,990 --> 00:11:09,830 They are not exactly modules, but Tailwind needs it so that it works for us later. 74 00:11:09,830 --> 00:11:18,419 So, we go to the CSS index, we have it within SRC and we paste it. 75 00:11:20,299 --> 00:11:28,220 Okay, we already have it, okay? Well, here I have the autosave marked, 76 00:11:28,220 --> 00:11:36,620 that's why I'm not you're not seeing me at any time give it to save ok ok then 77 00:11:40,179 --> 00:11:52,139 this we would already have it and in principle it would already be if we come to our tag to our page ok we 78 00:11:52,139 --> 00:11:59,769 we update it, well, we are going to start the first one, 79 00:12:03,529 --> 00:12:17,730 npm, it is worth it, now if I update it, I have the app, it is worth it and this is how we have left it 80 00:12:17,730 --> 00:12:23,490 right now, now we are going to make some kind of change to see if it responds to the classes of 81 00:12:23,490 --> 00:12:31,889 tailwind then let's go to pp jsx and in the tip I am going to put here for example 82 00:12:35,730 --> 00:12:44,759 h 1 h h class 83 00:12:47,299 --> 00:12:56,139 class name ok and there we are going to start putting classes that we will see ok 1 I am going to put 4 xl 84 00:12:56,139 --> 00:13:06,039 another I am going to put the font ball that is put in black another the underline ok as we have installed 85 00:13:06,039 --> 00:13:14,480 the extension of tailwind they already appear to me directly ok here we are going to put the typical 86 00:13:14,480 --> 00:13:29,710 hola world ok and I don't want this and I leave it here ok well then we have this 87 00:13:31,009 --> 00:13:40,710 ok if everything is fine and the classes recognize us ok then we should be in the world with a 88 00:13:40,710 --> 00:13:46,889 size in black and underlined ok then yes here good that he has already done it to me 89 00:13:48,809 --> 00:13:56,870 ok and in black it seems to me that it is because of the browser ok then that you have to look at it we are going to 90 00:13:56,870 --> 00:14:06,649 make another another change then we are going to get in for example in index css 91 00:14:12,330 --> 00:14:21,970 we are going to put we are going to configure the body class ok and there I am going to say it well because here I want the background 92 00:14:25,090 --> 00:14:26,710 we are going to put a color 93 00:14:26,710 --> 00:14:41,009 20 20 20 it seems that this is like black 20 20 20 and once this comes out it is not black at all 94 00:14:41,009 --> 00:14:50,950 but in black and we are going to put the color of the source which is the color the color we are going to put two 95 00:14:50,950 --> 00:14:58,190 points in white white ok ok then this has to 96 00:14:58,190 --> 00:15:07,730 repercute in the boy label ok ok if we come here because we already have it in 97 00:15:07,730 --> 00:15:12,129 white ok and with him 98 00:15:12,129 --> 00:15:17,730 as we want ok this is a roll that does not pick up 99 00:15:17,730 --> 00:15:27,649 all the classes but well in the browser of the laptops of the institute it must work 100 00:15:27,649 --> 00:15:33,970 ok well and now from this video what we are going to start to see is how to use tailwind to 101 00:15:33,970 --> 00:15:45,570 do some some interface developments some well it is a good one for our front that 102 00:15:45,570 --> 00:15:49,690 through them connect to our bat a greeting