Up next in 10
Are you confused between Tailwind CSS and Flexbox? In this video, you’ll learn everything you need to know about Tailwind CSS and how it compares to Flexbox — explained in a simple, beginner-friendly way.
This CSS tutorial is perfect for anyone who wants to build modern, responsive layouts without writing too much custom CSS. We’ll cover how Tailwind CSS for beginners makes styling faster and easier, and how you can use Flexbox concepts inside your Tailwind CSS project.
By the end of this Tailwind CSS Flexbox tutorial, you’ll understand when to use Flexbox directly and when to rely on Tailwind’s utility classes for a cleaner workflow.
#tailwindcss #tailwindcssforbeginners #tailwindcsstutorial #csstutorial
Show More Show Less View Video Transcript
0:00
Hi friends, welcome to Tutonic channel.
0:03
Today I'm going to teach about the
0:06
tailwind CSS very easiest way. Yeah,
0:09
everyone
0:11
uh having a doubt about tailwind CSS. It
0:13
is very difficult. There are many
0:15
students are telling that I'll be
0:17
teaching very easiest way. Okay. Now I'm
0:19
going to go to start a new project
0:26
web 10 wait
0:32
here I'm going to create two different
0:37
files
0:38
one is for
0:44
uh HTML CSS another one for style So
0:49
first one index html.
0:52
This is for HTML. Another one is this
0:54
one folder. I'm going to name it as uh
1:01
I'm going to name it as this one. Let's
1:03
name it as index 2. HTM like
1:08
this one for HTML. So HTML integration
1:11
in VS Code very simple. Hold on the
1:13
shift key down and press one. You can
1:15
implement it. So here I'm going to
1:19
create a simple container. You can see
1:21
here simple one
1:24
start with div
1:27
open and close bracket here. I'm going
1:29
to name it as class. You have to write
1:31
this one as
1:33
uh cont.
1:42
So here inside the this container class
1:46
I'm going to do the styling part I'm
1:49
going to do in as
1:51
here style. Okay. Styling how to style
1:55
this one as start it over here. This
1:57
container I how to implement it say this
2:00
container you copy this paste on it over
2:03
here. Open and close bracket
2:06
you have to write this one display
2:09
flex.
2:13
You have to write here justify container
2:15
center
2:17
align item center.
2:21
Okay. So that the this this one
2:25
horizontally we have to make this center
2:26
this container
2:29
align mean vertically center. Okay the
2:32
have a look this one this container what
2:35
is text you entered here. So that uh we
2:37
the paint got the paint document
2:40
container is nothing but like this this
2:42
container mean like this one
2:44
something is a container we need this
2:47
something text we have to write it here
2:50
it is horizontally uh center vertically
2:53
center I'm going to this is this is new
2:57
word
2:59
like that
3:03
so how to make it make it this one as
3:06
Okay, this is simple one. Okay, simple
3:08
and make. Okay, so what I'm going to do
3:10
is here that's the thing you have made.
3:14
Now I want to do it here as
3:18
okay. So here I'm going to make the text
3:22
this is
3:24
new world
3:28
control S
3:30
otherwise you can go and see that's it
3:34
display flags I'm implementing the flags
3:36
justify container center align contain
3:38
center okay so now let's go and run run
3:41
on it first one
3:44
it's coming here
3:47
it is center vertically center. This is
3:49
your center. Okay. Here I haven't
3:51
specify the height. If you specify the
3:52
height, it will be center. It take care
3:54
of this uh spaces. Okay. Okay. Don't
3:57
worry about that. Okay. So, I'm going to
3:58
specify the height property
4:02
100
4:04
point
4:07
here it is center. Okay. Now I I'm not
4:10
going to give that. Okay. Let's leave as
4:13
it is. This simple. Now here I want to
4:15
do the thing is another one font size
4:20
make it as 30 pixel font weight
4:26
make it as bold
4:28
that's the only things I am doing the
4:30
styling part very simple it's a
4:33
container this container we are giving
4:34
the uh
4:37
flex direction flex direction it's
4:40
default if you're not giving the
4:41
direction it is default direction will
4:43
be row justify container center align
4:45
container size specified and both that's
4:49
it now let's have a look here okay here
4:52
it is
4:54
text the same thing how do I implement
4:58
it into
4:59
tin CSS it's very simple hold shift key
5:03
down press one press enter key to
5:05
implement that now here we no need to
5:09
touch include inside the hat tag we only
5:13
we have to what the things you have to
5:14
include it inside the tag is you have to
5:16
go to the tailwind you just go to the
5:19
Google Google and type
5:26
CSS or something if you click on it it's
5:28
go to the respective website
5:31
okay it has a documentation click on it
5:36
okay documentation you can get
5:38
everything anything you want okay you
5:40
can get anything you want from the
5:41
documentation
5:44
Okay. So you have to styling and
5:47
everything.
5:50
Now here go to the place here the
5:54
installation. This is when you click
5:55
documentation.
5:57
It's it's coming to this page which is
5:59
installation page. Here you have to go
6:00
to that tab which is called as playd.
6:03
Copy this style.
6:06
Copy this. Paste inside the attack. this
6:09
thing have
6:10
file save.
6:13
Now I successfully implemented the
6:17
uh tailwind CSS in my project. Now I'm
6:21
going to go to doing the style
6:24
here. The same thing what I implemented
6:26
in my HTML CSS. The same thing I'm going
6:29
to this code I converted to my
6:33
where tail. So here I'm going to the
6:35
same text I just the same text I just
6:39
copied then new word paste it on it
6:42
inside this new tag.
6:44
Okay. So how would I style this one?
6:47
It's very simple
6:49
inside this d tag. Same thing we have to
6:52
implement the class. Here also the same
6:54
thing we have to implement the class.
6:57
Here we have write the we have inside
7:00
HTML have written the CSS file
7:03
separately and call the class name
7:07
inside the class inside the double
7:11
quotation mark. Okay. So here apart from
7:14
this here we are doing this. How to do
7:17
the thing is here I'm going to do simply
7:19
we have to implement the flax into
7:22
tailwind you go and look at the
7:24
documentation click on here click on the
7:27
search bar you have writed here flax
7:31
if you click on the flags the flax how
7:34
to implement the flax it will be uh
7:36
explained you can see that flax how to
7:38
implement the flax you can see the flax
7:40
the flat basics basis flax direction how
7:44
to the flax direction All column here
7:47
this column row all the things how to
7:49
implement this all things I explain here
7:51
like this okay this here everything so
7:54
we write like this flags flax here write
7:55
like this column you go like this okay
7:58
so how to do the thing is very simple
8:00
you have to write it simply you have to
8:02
implement the flags simply you have
8:04
write flats
8:05
okay if you are not giving the column if
8:08
you're not the if you want to write the
8:09
column you have to specify the column
8:11
flax column
8:13
as a documentation explain this column
8:16
Okay. Now, now we don't need a column.
8:18
We just keep flex
8:22
first. I I want to this one this code
8:25
justify container realign center. It's
8:27
very simple way to write it here. Here
8:30
you can pick up the justify container
8:31
here. Now, how to write the justify
8:34
contain center here. Simple the same
8:36
simple code is just copy
8:39
paste on it here. Very simple code.
8:47
Yeah,
8:49
after this align enter
8:51
that's also simple.
8:54
Go to the align items. This align items
8:56
not align contain align item item set.
9:01
Okay. Here justify contain that
9:04
justifying container set. We don't need
9:06
to write that this all the entire code.
9:08
The flags they implemented justify
9:10
contain set align item center. Item
9:12
center only that putting the item center
9:14
this only this everything are there it
9:16
is that that go get rid of this items
9:20
only this keep this one okay here only
9:23
keep flex no need this class and all
9:27
very simple to implement it so how to do
9:30
the next things
9:33
how to do the next thing font font
9:35
implementation it is very simple
9:39
you have to select go to Documentation
9:42
font here you have to show
9:44
implementation the font change the font
9:47
styles you can change click on it font
9:50
size click on the font size the various
9:52
styles are there I want to go for the
9:54
custom one custom here go to the text
9:58
this a text let's copy this okay so if
10:01
it is a small base these are the various
10:03
sizes are there you just implement and
10:06
this all things you just put it and have
10:08
a look Okay, you just put your code and
10:13
have a look how the how the codes look
10:16
like. Okay, so I just implement this
10:18
text. So out of the I have custom size
10:23
30 pixel here also we have to custom 30
10:27
pixel here. Simple font size you have
10:30
write it like this text 30 pixel very
10:33
simple after that what I'm going to do
10:35
is after that font
10:39
weight font white also very simple you
10:42
can see the front p is there I need a b
10:46
is there copy this
10:54
board that's it control to save
10:58
Back to my documentation run the second
11:00
one it's working
11:04
the first one is working second is the
11:06
same thing this how very simply you have
11:08
to implement the tailwind CSS thank you
11:11
for watching
#Computers & Electronics