Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Back end Vs Front end - Vídeo 21 - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Configurando y personalizando CSS de Tailwind.config.js
Well, in this video we are going to see how to customize a little and how to do our own
00:00:01
classes with Tailwind, okay? I'm going to do it fast because it doesn't have, well, it does have its history,
00:00:08
but come on, I think we can see it more or less quickly and you can understand it very quickly. We have
00:00:22
the classes of tailwind that are the ones that we have been using after class to do
00:00:29
what we are looking for is worth in this case a button that has a jugger that changes the color is worth with
00:00:35
a text of a color the text with some points of rupture when it becomes very small that we change
00:00:45
the px and the pi remember the padding margin left right with x up and down with and rounding
00:00:57
the button is worth and a margin of 3 an external margin of 3 is worth on all sides left right
00:01:08
up and down is worth and these are classes of tailwind well we have a file that is the
00:01:15
tailwind config js that when we enter that file because we can do things like these, for
00:01:22
example, you will not have these lines, it is worth that I have just put them in right now and we would have
00:01:32
this then here we can play with the themes with the plugins to load different
00:01:41
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
00:01:48
us our own classes, well, the theme key, the theme key. Okay, then, within the theme key, notice that I have two values,
00:01:59
or two values that in turn are keys, it is worth the font family and the stand, sorry and the colors,
00:02:12
that is, to see if I say it well within the center, this stand is worth being contains all the keys all
00:02:21
the keys that we can modify those keys you can see them in the tilewind configuration
00:02:29
ok you have them all in the custom edition because here you have the configuration the content the
00:02:37
themes the screens the colors ok we would have everything here and how to modify and how to do
00:02:43
the things well then we have that colors and typographies ok then I with colors
00:02:48
because I invented one that is the white bill and the color that I always assign a string with a
00:03:00
pad and then the color that you can see on a web page for example called the color hand
00:03:07
here we would have this is the page and then here I am going to make it a little bigger so I hope
00:03:14
that it looks good when you put yourself on top of a color
00:03:31
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
00:03:37
here and paste it this seems to me that you paste it without the pillow to see that is ok then I have already
00:03:44
taken that color that is selected ok if we come to our application we are going to put here
00:03:55
so that our page is seen, it is worth if here instead of bg sky 500 I put that as a
00:04:01
color background I want the white villa which is the color that I just made you see how it takes
00:04:12
now this color is worth then I can create here my entire wing config all the colors
00:04:19
that you want, in fact, I could put
00:04:27
if I put some keys, we could add different
00:04:32
categories, that is, if you look there, I put the bg script sky script 100 or 200 or
00:04:39
300 and that made it darker, then we can
00:04:47
modify we can make the different types of color is worth that it is also interesting to put that
00:04:56
is to see if I find it to put those variants ok good they are here what to look at is to know
00:05:10
they will be more metallic here this creates them for me you see with this then look at how here I am going to
00:05:34
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
00:05:43
a color that is the tahiti
00:05:56
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
00:05:59
we are going to put our page here we are going to put the pg here and we are going to put it
00:06:14
Taiting 200, okay, then you see how the Taiting is already taking me, if we put the 600, okay, and in the end,
00:06:20
well, we can do it by making these variations on a color that we have created
00:06:37
nosotros y eso es interesante a la hora de hacer todo este tema de el from vale todo el tema de
00:06:44
la gui esto es muy interesante el poder personalizar de esta manera vuestro vuestra interfaz vale que
00:06:51
más he puesto yo aquí el font family vale entonces con el font family pues lo mismo me puedo crear
00:07:00
una clase o un tipo de fuente vale que en este caso es esta alcaldía grace vale de dónde he
00:07:07
cogido yo esta fuente d lo cerrado lo cerrado creo nada es esto por ejemplo del font google
00:07:14
vale entonces en font google bueno ya lo enseñó desde aquí voy a ir para atrás yo he cogido me
00:07:28
put it on the google.com page, it is worth google.com here because you are looking for or looking for
00:07:36
a source that you want, I have taken this one, the most beautiful one, okay, I select it, okay, and here what I
00:07:44
I do is to enter
00:07:54
and
00:07:58
ok ok from here I press the get phone button
00:08:07
ok and in get phone you find the take the code to embed it inside the
00:08:11
download I don't want to see it at the end sorry I don't want to download it at the end
00:08:17
we are on a web development the front as with tailwind we are taking it from its
00:08:22
server ok well here I do the same what I want is to drink this code 2 I select it
00:08:32
and this is important here it gives me the link and the import what I need is the import and I only copy
00:08:41
I only select and copy from the import to the point and comma ok I copy this the style
00:08:48
not the style label not because here as in the front we are not playing with the style ok we could
00:08:56
yes but no it is not done like this ok then we give the import we select because the url is where
00:09:04
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
00:09:12
add it to the index file css ok then up here or down here ok I put that
00:09:19
code that I have copied that in this case is this ok then I put the import the url well and I put
00:09:32
all the string chain that I have copied, it is worth when I do that if I come to the j j s x
00:09:40
itself, it is worth remembering that it is to say and there they are and here we put the font
00:09:51
and here you have to put the same name that appears to you, well here not sorry in taiwan
00:10:00
j s, notice that on the one hand I put the name that I want to give it, which is this white villa,
00:10:07
two points, I open the brackets, it is worth and there inside I put the name that that source has, you have to
00:10:14
put that name and we here what we do is call then alfón txt villablanca
00:10:23
I have put everything with lowercase I suppose it is not worth it because we are going to put this one
00:10:35
ok and then at the time when I have put that family of that source to look at how
00:10:49
I have already taken this source here then a little that you want with the idea that with the
00:10:59
tailwind.config.js we can customize we can create our own
00:11:07
our own styles ok and load our sources or sources that we use external
00:11:17
well, a little today's video was this was to know how to use or how to use
00:11:24
as you can use the tailwind.config.js and this I want to see that you use it in the
00:11:31
defense of the project, it is worth that you do not forget, well, a greeting, see you later
00:11:38
- Idioma/s:
- Idioma/s subtítulos:
- Autor/es:
- Mario S.
- Subido por:
- Mario S.
- Licencia:
- Dominio público
- Visualizaciones:
- 48
- Fecha:
- 26 de julio de 2024 - 20:58
- Visibilidad:
- Público
- Centro:
- IES VILLABLANCA
- Duración:
- 00′ 13″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 33.98 MBytes
