1 00:00:02,609 --> 00:00:09,269 Well, in this video we are going to start to see how to work with Tailwind. I already told you in the 2 00:00:09,269 --> 00:00:17,609 previous video that here I am going to make a kind of impasse to create a series of videos 3 00:00:17,609 --> 00:00:24,929 so that you can see how to work with Tailwind and you can start exploring and 4 00:00:24,929 --> 00:00:32,049 to do interesting things, I have put the visual studio screen and here in 5 00:00:32,049 --> 00:00:42,609 small I also have the one of the browser, okay, I have the typical world, we go to the page of the taiwin 6 00:00:42,609 --> 00:01:03,799 Timewind.css to the main Timewind page. Remember that we go to getstart, 7 00:01:03,799 --> 00:01:14,900 here to see the initial configuration that we have to do, we are going to enter the installation 8 00:01:14,900 --> 00:01:19,159 and here you have all the steps that this first one we have already created, it is worth as long as you have 9 00:01:19,159 --> 00:01:26,959 the client folder, you already have it, it is worth following it, which is what I explained in the previous video 10 00:01:28,519 --> 00:01:41,329 and that's it, well, what is a framework? Well, it is nothing more than a space, a web server that 11 00:01:41,329 --> 00:01:50,930 provides us with some classes created for CSS, for style sheets, then we can use them, 12 00:01:50,930 --> 00:01:56,989 then we can work as we have installed with the npm, the tailwind in our project, okay, 13 00:01:56,989 --> 00:02:04,049 we can work with the cdn, which is in the cloud, we can work in various ways, okay, in principle 14 00:02:04,049 --> 00:02:09,289 we are the only thing we are going to do right now is to start calling classes, what difference 15 00:02:09,289 --> 00:02:19,610 between tailwind and bootstrap, for example, or any other framework that you can work with, 16 00:02:20,870 --> 00:02:28,550 with the way they work, they are different but within that they are all frameworks, so it is a 17 00:02:28,550 --> 00:02:34,969 bit like programming, it has its differences depending on whether we program in python or in java or in 18 00:02:34,969 --> 00:02:42,349 cessar vale pero no son unas diferencias que una vez que tienes los conceptos base te vaya a 19 00:02:42,349 --> 00:02:50,270 costar mucho o nada pasar de uno a otro vale porque vamos a usar el time wind porque me 20 00:02:50,270 --> 00:03:00,110 deja trabajar más sobre las o sea no me lo da todo tan hecho entonces me deja personalizar 21 00:03:00,110 --> 00:03:06,469 bastante más sobre las hojas de estilos vale que vosotros las habéis visto en primero entonces pues 22 00:03:06,469 --> 00:03:13,610 me parece buena buena opción para trabajar con esto que veáis cómo funciona el framework cómo 23 00:03:13,610 --> 00:03:19,189 vamos a crear el from a partir de este framework o podríais hacerlo a partir de cualquiera utilizando 24 00:03:19,189 --> 00:03:26,430 solo clases vale entonces tenemos aquí los diferentes pasos que hay que dar vale aquí me 25 00:03:26,430 --> 00:03:29,889 put on the app jsx that is the one that we are going to be playing all the time 26 00:03:32,330 --> 00:03:39,509 because an example is worth with the world with the world hello they put it on h1 well the first thing 27 00:03:39,509 --> 00:03:48,509 to say is that when you are working with with the wind the classes that are from the 28 00:03:48,509 --> 00:03:57,389 browser they do not work ok they are deactivated then if you see here I have the world but it is 29 00:03:57,389 --> 00:04:06,569 an h1 and an h1 gives a size ok if I put here that is, you already know that in html h1 h2 h3 h1 is a 30 00:04:06,569 --> 00:04:17,939 large size h2 is a slightly smaller size test h2 for example ok then notice that 31 00:04:17,939 --> 00:04:28,459 how to be working now with time with those classes that are by default from the browser, it is 32 00:04:28,459 --> 00:04:34,459 worth that the browser should detect the html, that everything is deactivated, it is worth then we have 33 00:04:34,459 --> 00:04:41,100 to start working with the tailwind classes that is why we have configured it to use it, I am going to 34 00:04:41,100 --> 00:04:54,100 delete this, we are going to put this a little bigger, we are going to see 35 00:05:02,779 --> 00:05:11,600 this, then I have the world here, then we are going to put, for example, a class, 36 00:05:11,600 --> 00:05:24,000 ok you know class the same quotes quotes ok then for example we are going to put the same 37 00:05:24,000 --> 00:05:30,399 example that is telling us that here it puts the flash name says the text 3 xl fom ball and underline 38 00:05:30,399 --> 00:05:40,939 text x 3 xl is the font size put it in black and underline because it is underlined ok we are going to 39 00:05:40,939 --> 00:05:52,240 going to see one of these classes, okay, then we are going to put the one with good, okay, look at how 40 00:05:52,240 --> 00:06:00,779 when I write I get the self-completed complemented here, okay, well, that 41 00:06:00,779 --> 00:06:12,319 I have loaded the extension of the tailwind so that it recognizes me so that it makes me that 42 00:06:12,319 --> 00:06:21,180 so that it makes me that help then and to put the extension of the wing css and that's it, okay, you're 43 00:06:21,180 --> 00:06:30,060 going to have it, it's interesting and it's fine, okay, you have it, okay, then we have 44 00:06:30,060 --> 00:06:37,879 put this class, it was a ball, so what does it do that it has already put that text in black, 45 00:06:37,879 --> 00:06:44,459 it is worth the hello world, it is worth and I have only put this class, I have not done anything else, we are going to put another 46 00:06:44,459 --> 00:06:55,139 the other class that is the underline, it is worth 5 more or nothing, it is worth underline, it is worth then I already 47 00:06:55,139 --> 00:07:04,560 I have it underlined and these two classes are working for me and the text and a 3 xl is worth that 48 00:07:04,560 --> 00:07:12,079 only what it does is put it on me, it is worth it, it expands that size of that text much more, then 49 00:07:12,079 --> 00:07:15,759 look at how only working with these classes 50 00:07:15,759 --> 00:07:25,699 Well, it works for me, it works for me, okay, what else can we see, even if this is more or 51 00:07:25,699 --> 00:07:30,139 less fast, well, we are working with text, so if we come to the help of the 52 00:07:30,139 --> 00:07:33,959 tailwind and we go down here you have all the options 53 00:07:33,959 --> 00:07:45,899 what we can use is worth then we have good this of the containers such is 54 00:07:45,899 --> 00:07:58,939 great I have some that is the text good or the font look here the test with which the test color 55 00:07:58,939 --> 00:08:06,139 test a link is worth because for example the test color then I click on what I want to do 56 00:08:06,139 --> 00:08:10,319 then it starts to tell me ok it starts to show me the help that is with which you have to work 57 00:08:10,319 --> 00:08:16,740 because in the end this is a framework they are updating it constantly then you have to 58 00:08:16,740 --> 00:08:22,319 be seeing it is worth constantly then here it begins to show different colors then 59 00:08:22,319 --> 00:08:28,819 if you go down it is putting the colors here ok it is putting you here what kind of colors 60 00:08:28,819 --> 00:08:37,159 for example if I want for example this orange 300 is worth then if I put the text class here 61 00:08:40,259 --> 00:08:43,519 now 300 62 00:08:45,759 --> 00:08:54,059 is worth because it will show me the text with that color is worth then notice that it is very easy to 63 00:08:54,059 --> 00:08:57,840 use that I want 64 00:08:59,259 --> 00:09:04,440 here is that it has to be inside a container we are going to try it but it is not going to 65 00:09:04,440 --> 00:09:11,240 do the test center case for example it is worth for me to center it he has done it to me he has 66 00:09:11,240 --> 00:09:17,720 taken as a container look at the web itself the body itself is worth then I 67 00:09:17,720 --> 00:09:24,059 have it centered I already have it there well well we continue looking at things 68 00:09:24,059 --> 00:09:38,289 The smooth inside, decoration, etc. 69 00:09:38,289 --> 00:09:49,139 Let's see the font family. 70 00:09:49,139 --> 00:09:56,139 For example, the font-sum, font-series, font-mono. 71 00:09:56,139 --> 00:10:03,139 We have different families here that will take one or the other depending on the server. 72 00:10:03,139 --> 00:10:08,299 that is, forgive the browser that you are using, then we are going to put, for example, here the font 73 00:10:09,679 --> 00:10:15,320 font 6, then we are going to put it in, we are going to see so that as soon as the change is made 74 00:10:18,139 --> 00:10:18,679 with 75 00:10:22,860 --> 00:10:30,200 value, then here I already put that source that we have chosen, okay, let's see what else we can 76 00:10:30,200 --> 00:10:37,220 put it here that more is leaving us is worth the over the focus and other states it is worth that this is also 77 00:10:37,220 --> 00:10:45,960 interesting because you say well look at this example it is fine we are going to put it instead of in h1 we are going to 78 00:10:45,960 --> 00:11:01,080 put it as a paragraph I am not going to leave h1 and I am going to put it to see if it takes me directly and that's it 79 00:11:01,080 --> 00:11:09,200 ok then what it is telling it is in the example you say you have the font sand and when I pass with the 80 00:11:09,200 --> 00:11:14,220 young man the young man is when you pass the cursor over it then the letter changes ok then 81 00:11:14,220 --> 00:11:21,419 well here we are going to put the young man when you go over it you are going to put it as a font 82 00:11:21,419 --> 00:11:33,179 because in this case they are ok then here when I go over you see it already takes me 83 00:11:34,600 --> 00:11:40,320 and that text changes me, that source is worth it, so this is also interesting when 84 00:11:40,320 --> 00:11:47,200 making the pages more striking when making a button that changes my color, it is worth 85 00:11:47,200 --> 00:11:56,559 if we put here, for example, we are going to continue to see the example and so I am doing it according to 86 00:11:59,460 --> 00:12:03,320 we are seeing the documentation that I think this is the interesting thing, it is worth then, for 87 00:12:03,320 --> 00:12:09,899 example, here I want to give a color and here I have several background colors, it is worth the same 88 00:12:09,899 --> 00:12:17,840 than with the text, so I want to put a background to this div, so I am going to put the 89 00:12:17,840 --> 00:12:32,710 class here and the class is important that you remember that the classes always go without the quotes, okay, 90 00:12:34,210 --> 00:12:38,929 well, let's play a little bit with this, then we are going to put, for example, a color, 91 00:12:38,929 --> 00:12:50,879 the letters are in orange we are going to put it for example come on let's put the 700 red yes 92 00:12:50,879 --> 00:13:09,480 ok then I'm going to put it here let's see it here bg red 700 ok and he puts it all in red ok 93 00:13:09,480 --> 00:13:24,129 we are going to put it also I am going to lower this size a little and I am going to put it because also 94 00:13:29,250 --> 00:13:30,710 for example 95 00:13:32,769 --> 00:13:43,210 there is another class that is the round that you see that it rounds the little corners you are then 96 00:13:43,210 --> 00:13:49,389 at the time of making a button, they also noticed how easy it would be with the link, we could also put 97 00:13:49,389 --> 00:14:00,330 the jover here, it is worth telling him hey if it is when you go over it, put the color instead of in red 98 00:14:02,309 --> 00:14:09,289 because put it in pink pink 300 is worth then because those things are worth that we can go 99 00:14:09,289 --> 00:14:16,350 playing with all of this and then for example here because with the pink one because it puts me 100 00:14:18,909 --> 00:14:37,360 when you pass with the young man also put the text color with a color for the pink one because 101 00:14:42,519 --> 00:14:47,500 it is worth two when we pass because it is already valid and I can play with it in this way you see that 102 00:14:47,500 --> 00:14:55,659 change the young man for now, that is, with knowing what is young, knowing what the text is, the font is good 103 00:14:55,659 --> 00:15:03,039 and especially with the help we can continue doing many, many things, you have 104 00:15:03,039 --> 00:15:14,799 all these classes here, well now I come up and here I have some options 105 00:15:14,799 --> 00:15:34,299 there is one that interests me now I am going to see if I find it the breakpoints break 106 00:15:52,490 --> 00:15:59,100 this has to be in the configuration 107 00:15:59,100 --> 00:16:14,539 is here this in response and it is worth at the end that it is a web page because it has to 108 00:16:14,539 --> 00:16:22,200 also respond to a web page because to certain points of rupture is worth what that means 109 00:16:22,200 --> 00:16:29,480 if you are doing the front for one that goes against a back in which we have also done 110 00:16:29,480 --> 00:16:40,940 we already know that people can see that front from a pc from a tablet from a mobile phone and each 111 00:16:40,940 --> 00:16:54,139 of those devices has its resolution is worth then that is what we can control with these 112 00:16:54,139 --> 00:17:02,000 surnames, the sm which is up to 640, the md, the lg, the xl, the 2xl, with these resolutions all this 113 00:17:02,000 --> 00:17:08,519 can be changed, what happens is that we are not going to change it, but it could be done and your 114 00:17:08,519 --> 00:17:19,720 dao colleagues do it, so in fact they make their own framework, well, for example, 115 00:17:19,720 --> 00:17:23,859 I have this example the hello world is worth it I am going to put it 116 00:17:27,019 --> 00:17:35,019 to a normal size and that's it hello world ok what I want is 117 00:17:53,940 --> 00:17:55,640 to not be playing with the guy 118 00:17:55,640 --> 00:18:12,559 and I don't want to be playing with him with the width and all this I'm going to leave it like this I'm going to 119 00:18:12,559 --> 00:18:22,609 play only with the text this I'm going to give control z as we were then what I want is that 120 00:18:22,609 --> 00:18:31,430 when the screen has a certain resolution the text is smaller ok then I'm going to change 121 00:18:31,430 --> 00:18:36,150 here instead of 3xl we are going to put it 122 00:18:41,730 --> 00:18:45,450 good now until where it leaves us 123 00:18:48,250 --> 00:19:05,220 ok then I'm going to say well if I have the text or I'm in a resolution 124 00:19:05,220 --> 00:19:11,940 because the one that the laptop has right now is worth because it is high I want the text to look 125 00:19:11,940 --> 00:19:19,019 big, these are the breaking points, it is important that you remember that they inherit from the 126 00:19:19,019 --> 00:19:26,940 smallest from the smallest resolution to the largest resolution, that is important 127 00:19:26,940 --> 00:19:33,599 because because what you will have to control you will have to do the page thinking about the smallest 128 00:19:33,599 --> 00:19:41,779 smaller one to the one that is directed and then go controlling those changes of resolution to 129 00:19:41,779 --> 00:19:52,299 higher ok then of course what happens let's go to the development tools ok I 130 00:19:52,299 --> 00:19:59,039 here I start to change resolution I start to go up ok I'm going to go down I don't care then you see 131 00:19:59,039 --> 00:20:05,920 here there is no change ok there is absolutely no change at all ok I am changing the 132 00:20:05,920 --> 00:20:15,819 resolutions and nothing happens ok then what we are going to say is good the smallest one that is sm 133 00:20:15,819 --> 00:20:25,279 ok then I am going to put it good if here the text is 9 xl I am going to say put me when it is in a 134 00:20:25,279 --> 00:20:38,029 resolution sm two points ok I'm going to say the text the text I want it to be smaller so I'm going to 135 00:20:38,029 --> 00:20:49,549 put it at 2 xl for example ok this when it is in the sm resolution then look at how I am 136 00:20:49,549 --> 00:21:03,500 in right now we are going to put it I am lowering resolution resolution resolution ok and here 137 00:21:05,579 --> 00:21:15,369 we have said 640 which is what has happened of course until it has not reached the resolution of 138 00:21:15,369 --> 00:21:25,450 sm it has not put this size on me ok the resolution sm we have left that it is 640 then 139 00:21:25,450 --> 00:21:30,730 en el momento en el que yo cambio la resolución y la pongo a 640 ya me lo pone en chiquitín vale 140 00:21:30,730 --> 00:21:37,250 entonces esta forma de trabajar es interesante vale entonces aquí lo que tendría más sentido 141 00:21:37,250 --> 00:21:44,670 es al menos todo el tiempo pequeño y cuando llegues a la resolución por ejemplo vamos a 142 00:21:44,670 --> 00:21:58,910 put 768 md ok because when it is half you are going to put it to me well 4 xl and when it is 143 00:22:01,509 --> 00:22:02,309 md 144 00:22:02,309 --> 00:22:20,519 tex we are going to put the 6 xl when it is md it is worth then and sorry when it is the axis the axis 145 00:22:21,980 --> 00:22:29,400 so it is worth then this makes sense because because we have controlled first when you are 146 00:22:29,400 --> 00:22:40,279 smaller, that is, when the resolution is smaller, it has the text in 2 xl, okay, okay, if it starts to go up 147 00:22:42,640 --> 00:22:52,099 38 39 now it changes md 4 xl 148 00:22:52,099 --> 00:23:19,859 ah no sorry md are 768 ok then we go to md 768 well well well well ok we are in 767 now we enter 149 00:23:19,859 --> 00:23:31,240 md it has already made it a little bigger ok and when we enter the axis that is 1024 ok we are going to put 150 00:23:31,240 --> 00:23:39,880 1023 we are in the resolution 1023 at the time when I get to 1024 I am already doing it 151 00:23:39,880 --> 00:23:47,680 more in such a way that we are making that page be responsive, it is worth responding to the 152 00:23:47,680 --> 00:23:57,880 different sizes, these points are very important, very very important, okay, well then you 153 00:23:57,880 --> 00:24:07,519 veis cómo funciona un poco the wind es usar clases es usar los puntos de ruptura ahora en los 154 00:24:07,519 --> 00:24:14,779 siguientes vídeos os sigo diciendo más cosillas vale pero bueno veis que a nivel de dificultad 155 00:24:14,779 --> 00:24:23,640 no es más que empecéis a jugar con toda la documentación vale pues para hacer las diferentes 156 00:24:23,640 --> 00:24:42,279 the cards, which is also interesting, let's see if I can find it, let's see 157 00:24:48,740 --> 00:25:08,119 the interactive course, for example, let's see if I can find them, 158 00:25:08,119 --> 00:25:47,680 then because that is not what we were saying to make cards that I was looking at here it 159 00:25:47,680 --> 00:25:54,819 does not come as such but you do the search, it is worth putting the card that is a very typical way 160 00:25:54,819 --> 00:26:00,359 of showing information when you are reading it from a database, for example, hey, I have made 161 00:26:00,359 --> 00:26:07,259 an app and a backend to manage different articles and now I want to show them 162 00:26:07,259 --> 00:26:12,940 or I ask one to the database and then I show its particularities etc. 163 00:26:12,940 --> 00:26:22,500 ok then you see here it shows me different options it puts me the get the code and well 164 00:26:22,500 --> 00:26:27,559 sometimes they are paid others not all ways this 165 00:26:30,900 --> 00:26:43,400 we can we can do it we are worth in the next video so that this is not done very very long 166 00:26:46,680 --> 00:26:52,000 because here I have gone to take just one that will not let me take any example in the next 167 00:26:52,000 --> 00:26:58,940 video we are going to make a card so that you can see how it is and how from your 168 00:26:58,940 --> 00:27:06,119 css knowledge we are going to create it, it is good a greeting so far