Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end vs Front end - Vídeo 18 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 20 de julio de 2024 por Mario S.

60 visualizaciones

Terminamos de configurar Vite e instalamos TailwindCSS

Más información Transcripción

Descargar la transcripción

well in this video we are going to finish configuring everything 00:00:02
the bayern react that we had already configured in the previous video now what we are going to do is 00:00:08
configure well finish configuring it to clean files that here because they are not going to 00:00:15
be worth anything to remember always within the client folder 00:00:21
and configure the Tilewind. What is Tilewind? It is a framework that will serve us to 00:00:25
put classes that are already made from Tilewind. So we can import 00:00:40
those classes and use them and customize them modify them and play with the classes with 00:00:51
classes that are made in css in a fast way and that is how it is done currently in 00:00:58
companies ok then the first thing because as I told you in the previous video I am going to activate I am going to 00:01:07
to start the containers, we would already have the backend in operation, I am 00:01:18
inside the client folder and then here we are going to do the npm run d, okay, we already have 00:01:29
the front activated so if we go to our web 00:01:41
and we put localhost 5173 and we update it, we already have it here, okay, we already have it here, 00:01:46
well, we do not want these logos or this script or anything of what is here, okay, then we are going to 00:01:54
clean this and we are going to put the style sheets in the framework of the tailwind, well then 00:02:03
lo primero vámonos a la página de tailwind pues aquí vamos a meter google tailwind voy a entrar 00:02:11
en que te start a aquí voy a utilizar el framework vale las guías y aquí me da pues bueno diferentes 00:02:28
formas de trabajar con tailwind vale o de importar tailwind a estas tecnologías nosotros vamos a 00:02:36
work with bit then we are going to give bit and here we see a series of steps that we have 00:02:42
to follow ok then this one to create your project this one we already have it ok this would be to create 00:02:48
the client folder ok then we already have that we would start from step 2 ok and before 00:02:56
doing this we are going to clean a little of those files that have been created in the previous video 00:03:04
these files all those that we had everything that we have here then we are going to start 00:03:11
with the one of app js here you are ok in src app js x ok in app js x 00:03:19
well here is where that page appears that the browser visualizes us ok here we have 00:03:36
los diferentes las diferentes imágenes con target vale el set down bueno todas las historias que 00:03:43
vemos en el navegador entonces todo esto ahora mismo no me vale para nada así que 00:03:53
voy a y lo voy a borrar vale y aquí vamos a meter 00:03:59
un componente básico rfc vamos a instalar antes a ver si no a ver si no me lo reconoce por la 00:04:04
extensión vamos a instalar una extensión que se llama bueno pues el tailwind tailwind está 00:04:16
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, 00:04:25
I'm going to write everything, let's put a function 00:04:47
app, and within that function 00:04:57
I'm going to put a return 00:05:03
I wrote this wrong 00:05:09
this parenthesis goes here 00:05:13
it goes here, good man, so it is worth then we are going to put the app function and that it returns to us 00:05:17
for example that a div returns to us 00:05:36
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 00:05:41
here a sport as always tefao 00:05:48
ok because then this from other files you call it ok this one I'm going to leave it like this ok 00:05:56
what else we have the fichero ppcs ok this file acts on the pp jsx but since 00:06:06
we have erased everything we no longer import this file then all these classes all these things 00:06:17
css do not work for me at all so this one I can take it and delete it directly 00:06:22
ok we have another file of style sheets that is the css index this one we will need later 00:06:30
then this file is not erased what is done is to clean it ok because we the classes 00:06:38
that we are going to use is that of the tailwind framework, then you can have all this there 00:06:45
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 00:06:56
it and for now I am going to leave it clean ok we have the main j s x j s x is left 00:07:04
script is the union of javascript and ajax is worth if you do not ask well and we are going to leave this 00:07:15
right now so it is worth where we call the app that we are creating well it is like the connection 00:07:22
with app js x ok well then ok let's start good with this I would already have clean 00:07:31
the files ok the ones that I will need and we are going to start with the configuration I am going to close 00:07:46
everything with the configuration that they tell me from the technical documentation to install 00:07:53
tailwind css then the first thing he tells me is the first thing we have to do is install 00:08:01
these three modules then we copy and I'm going to come here I'm going to stop the service is worth the front 00:08:08
and I put the npm install the minus of the time wing as it is worth what I have copied from 00:08:25
the technical documentation and there it starts to load the modules as always 00:08:30
and we are seeing in the meantime the following says initialize the tailwind, that is, right now we already 00:08:41
have the packages, the modules that I need are already there, now what I need is to initialize 00:08:48
is that framework ok then we are going to put now instead of npm npx ok well this we are going to 00:08:56
do copy and paste well and it tells me ok I have created two files one that is the tailwind.com 00:09:05
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 00:09:18
post css is worth we are going to technical documentation and here it tells me well the first thing you have to 00:09:26
do is in tailwind with fix j ss you have to paste this in the html index what you are saying is 00:09:34
that adds all the files that these extensions have, they have to respond to 00:09:43
tailwind, okay, then I put this in the content and also html recognizes it, it is worth the index point 00:09:51
html copy we are going to come then it is to the tailwind config it is worth that this is this and in content 00:10:00
we are going to give control ok the formatting is already there and it would already have it ok we already have it as 00:10:09
it asks us here ok what else do we have to do 00:10:22
Well, let's see, the 3 would already be there, it says add taiwin directives to your css, okay, to my css index, 00:10:26
okay, then we are going to copy this and we are going to put these directives, ctrl c, okay, this is good, they are 00:10:46
They are not exactly modules, but Tailwind needs it so that it works for us later. 00:11:00
So, we go to the CSS index, we have it within SRC and we paste it. 00:11:09
Okay, we already have it, okay? Well, here I have the autosave marked, 00:11:20
that's why I'm not you're not seeing me at any time give it to save ok ok then 00:11:28
this we would already have it and in principle it would already be if we come to our tag to our page ok we 00:11:40
we update it, well, we are going to start the first one, 00:11:52
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 00:12:03
right now, now we are going to make some kind of change to see if it responds to the classes of 00:12:17
tailwind then let's go to pp jsx and in the tip I am going to put here for example 00:12:23
h 1 h h class 00:12:35
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 00:12:47
another I am going to put the font ball that is put in black another the underline ok as we have installed 00:12:56
the extension of tailwind they already appear to me directly ok here we are going to put the typical 00:13:06
hola world ok and I don't want this and I leave it here ok well then we have this 00:13:14
ok if everything is fine and the classes recognize us ok then we should be in the world with a 00:13:31
size in black and underlined ok then yes here good that he has already done it to me 00:13:40
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 00:13:48
make another another change then we are going to get in for example in index css 00:13:56
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 00:14:12
we are going to put a color 00:14:25
20 20 20 it seems that this is like black 20 20 20 and once this comes out it is not black at all 00:14:26
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 00:14:41
points in white white ok ok then this has to 00:14:50
repercute in the boy label ok ok if we come here because we already have it in 00:14:58
white ok and with him 00:15:07
as we want ok this is a roll that does not pick up 00:15:12
all the classes but well in the browser of the laptops of the institute it must work 00:15:17
ok well and now from this video what we are going to start to see is how to use tailwind to 00:15:27
do some some interface developments some well it is a good one for our front that 00:15:33
through them connect to our bat a greeting 00:15:45
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
60
Fecha:
20 de julio de 2024 - 20:46
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 11″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
41.93 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid