1 00:00:01,520 --> 00:00:08,960 Well, in this video we are going to see how to customize a little and how to do our own 2 00:00:08,960 --> 00:00:19,239 classes with Tailwind, okay? I'm going to do it fast because it doesn't have, well, it does have its history, 3 00:00:22,120 --> 00:00:29,820 but come on, I think we can see it more or less quickly and you can understand it very quickly. We have 4 00:00:29,820 --> 00:00:35,820 the classes of tailwind that are the ones that we have been using after class to do 5 00:00:35,820 --> 00:00:45,200 what we are looking for is worth in this case a button that has a jugger that changes the color is worth with 6 00:00:45,200 --> 00:00:57,880 a text of a color the text with some points of rupture when it becomes very small that we change 7 00:00:57,880 --> 00:01:08,319 the px and the pi remember the padding margin left right with x up and down with and rounding 8 00:01:08,319 --> 00:01:15,920 the button is worth and a margin of 3 an external margin of 3 is worth on all sides left right 9 00:01:15,920 --> 00:01:22,599 up and down is worth and these are classes of tailwind well we have a file that is the 10 00:01:22,599 --> 00:01:32,799 tailwind config js that when we enter that file because we can do things like these, for 11 00:01:32,799 --> 00:01:41,519 example, you will not have these lines, it is worth that I have just put them in right now and we would have 12 00:01:41,519 --> 00:01:48,879 this then here we can play with the themes with the plugins to load different 13 00:01:48,879 --> 00:01:59,879 things like using the forms, okay, that we will do that. Well, in this case I am interested in personalizing in some way or making 14 00:01:59,879 --> 00:02:12,879 us our own classes, well, the theme key, the theme key. Okay, then, within the theme key, notice that I have two values, 15 00:02:12,879 --> 00:02:21,159 or two values ​​that in turn are keys, it is worth the font family and the stand, sorry and the colors, 16 00:02:21,159 --> 00:02:29,259 that is, to see if I say it well within the center, this stand is worth being contains all the keys all 17 00:02:29,259 --> 00:02:37,780 the keys that we can modify those keys you can see them in the tilewind configuration 18 00:02:37,780 --> 00:02:43,659 ok you have them all in the custom edition because here you have the configuration the content the 19 00:02:43,659 --> 00:02:48,979 themes the screens the colors ok we would have everything here and how to modify and how to do 20 00:02:48,979 --> 00:03:00,919 the things well then we have that colors and typographies ok then I with colors 21 00:03:00,919 --> 00:03:07,819 because I invented one that is the white bill and the color that I always assign a string with a 22 00:03:07,819 --> 00:03:14,840 pad and then the color that you can see on a web page for example called the color hand 23 00:03:14,840 --> 00:03:31,620 here we would have this is the page and then here I am going to make it a little bigger so I hope 24 00:03:31,620 --> 00:03:34,680 that it looks good when you put yourself on top of a color 25 00:03:37,900 --> 00:03:44,919 we are going to take for example this one if I click on top of the code it copies it to me ok then if I come 26 00:03:44,919 --> 00:03:55,479 here and paste it this seems to me that you paste it without the pillow to see that is ok then I have already 27 00:03:55,479 --> 00:04:01,340 taken that color that is selected ok if we come to our application we are going to put here 28 00:04:01,340 --> 00:04:12,439 so that our page is seen, it is worth if here instead of bg sky 500 I put that as a 29 00:04:12,439 --> 00:04:19,740 color background I want the white villa which is the color that I just made you see how it takes 30 00:04:19,740 --> 00:04:27,300 now this color is worth then I can create here my entire wing config all the colors 31 00:04:27,300 --> 00:04:31,800 that you want, in fact, I could put 32 00:04:32,339 --> 00:04:39,980 if I put some keys, we could add different 33 00:04:39,980 --> 00:04:47,920 categories, that is, if you look there, I put the bg script sky script 100 or 200 or 34 00:04:47,920 --> 00:04:56,100 300 and that made it darker, then we can 35 00:04:56,100 --> 00:05:10,379 modify we can make the different types of color is worth that it is also interesting to put that 36 00:05:10,379 --> 00:05:34,610 is to see if I find it to put those variants ok good they are here what to look at is to know 37 00:05:34,610 --> 00:05:43,540 they will be more metallic here this creates them for me you see with this then look at how here I am going to 38 00:05:43,540 --> 00:05:54,100 copy this copy we are going to put this new color so here I am going to put a comma control v ok I have 39 00:05:56,100 --> 00:05:59,060 a color that is the tahiti 40 00:05:59,060 --> 00:06:14,839 ok ok and it has 100 200 up to 900 as it usually is then we are going to see if it works for us 41 00:06:14,839 --> 00:06:20,920 we are going to put our page here we are going to put the pg here and we are going to put it 42 00:06:20,920 --> 00:06:37,959 Taiting 200, okay, then you see how the Taiting is already taking me, if we put the 600, okay, and in the end, 43 00:06:37,959 --> 00:06:44,259 well, we can do it by making these variations on a color that we have created 44 00:06:44,259 --> 00:06:51,100 nosotros y eso es interesante a la hora de hacer todo este tema de el from vale todo el tema de 45 00:06:51,100 --> 00:07:00,339 la gui esto es muy interesante el poder personalizar de esta manera vuestro vuestra interfaz vale que 46 00:07:00,339 --> 00:07:07,500 más he puesto yo aquí el font family vale entonces con el font family pues lo mismo me puedo crear 47 00:07:07,500 --> 00:07:14,879 una clase o un tipo de fuente vale que en este caso es esta alcaldía grace vale de dónde he 48 00:07:14,879 --> 00:07:28,259 cogido yo esta fuente d lo cerrado lo cerrado creo nada es esto por ejemplo del font google 49 00:07:28,259 --> 00:07:36,620 vale entonces en font google bueno ya lo enseñó desde aquí voy a ir para atrás yo he cogido me 50 00:07:36,620 --> 00:07:44,779 put it on the google.com page, it is worth google.com here because you are looking for or looking for 51 00:07:44,779 --> 00:07:54,000 a source that you want, I have taken this one, the most beautiful one, okay, I select it, okay, and here what I 52 00:07:54,000 --> 00:07:58,759 I do is to enter 53 00:07:58,759 --> 00:08:07,240 and 54 00:08:07,240 --> 00:08:11,759 ok ok from here I press the get phone button 55 00:08:11,759 --> 00:08:17,500 ok and in get phone you find the take the code to embed it inside the 56 00:08:17,500 --> 00:08:22,959 download I don't want to see it at the end sorry I don't want to download it at the end 57 00:08:22,959 --> 00:08:32,720 we are on a web development the front as with tailwind we are taking it from its 58 00:08:32,720 --> 00:08:41,379 server ok well here I do the same what I want is to drink this code 2 I select it 59 00:08:41,379 --> 00:08:48,820 and this is important here it gives me the link and the import what I need is the import and I only copy 60 00:08:48,820 --> 00:08:56,200 I only select and copy from the import to the point and comma ok I copy this the style 61 00:08:56,200 --> 00:09:04,120 not the style label not because here as in the front we are not playing with the style ok we could 62 00:09:04,120 --> 00:09:12,799 yes but no it is not done like this ok then we give the import we select because the url is where 63 00:09:12,799 --> 00:09:19,879 we are going to download or we are going to or we are going to work with this source and here we are going to 64 00:09:19,879 --> 00:09:32,620 add it to the index file css ok then up here or down here ok I put that 65 00:09:32,620 --> 00:09:40,879 code that I have copied that in this case is this ok then I put the import the url well and I put 66 00:09:40,879 --> 00:09:51,919 all the string chain that I have copied, it is worth when I do that if I come to the j j s x 67 00:09:51,919 --> 00:09:57,860 itself, it is worth remembering that it is to say and there they are and here we put the font 68 00:10:00,860 --> 00:10:07,419 and here you have to put the same name that appears to you, well here not sorry in taiwan 69 00:10:07,419 --> 00:10:14,860 j s, notice that on the one hand I put the name that I want to give it, which is this white villa, 70 00:10:14,860 --> 00:10:23,860 two points, I open the brackets, it is worth and there inside I put the name that that source has, you have to 71 00:10:23,860 --> 00:10:35,840 put that name and we here what we do is call then alfón txt villablanca 72 00:10:35,840 --> 00:10:46,799 I have put everything with lowercase I suppose it is not worth it because we are going to put this one 73 00:10:49,879 --> 00:10:59,840 ok and then at the time when I have put that family of that source to look at how 74 00:10:59,840 --> 00:11:07,240 I have already taken this source here then a little that you want with the idea that with the 75 00:11:07,240 --> 00:11:14,639 tailwind.config.js we can customize we can create our own 76 00:11:17,120 --> 00:11:23,480 our own styles ok and load our sources or sources that we use external 77 00:11:24,519 --> 00:11:31,519 well, a little today's video was this was to know how to use or how to use 78 00:11:31,519 --> 00:11:38,600 as you can use the tailwind.config.js and this I want to see that you use it in the 79 00:11:38,600 --> 00:11:44,600 defense of the project, it is worth that you do not forget, well, a greeting, see you later