Up next in 10
Laravel 12 Meets POWERFUL Tailwind CSS!
52 views
May 21, 2025
This video will show you how to use Laravel 12 and the recently released Tailwind CSS v4 to create modern, responsive user interfaces. This is the best Laravel Tailwind CSS tutorial available, ideal for novices who wish to get started quickly and effectively. As we explore the main characteristics of both technologies, we'll go over everything from installing Laravel to using Tailwind CSS to create tidy layouts. For those seeking a comprehensive crash course in Laravel, this video is a great resource! #tailwindcssv4 #laraveltutorial #laraveltailwindcss #laraveltailwind
View Video Transcript
0:00
hi friends welcome to tutors funny
0:02
channel today I'm going to teach Laravel
0:05
along with tailwind tailwind CSS you can
0:09
have a
0:11
attractive designing of your UI design
0:14
of
0:15
uh you can go along with the laral with
0:18
tail CSS so you can have a you can see
0:21
where if you go to the tail with
0:24
CSS there there are lot of comments
0:26
coming from my chat box
0:30
uh explain larel along with tail CSS so
0:33
so that I bring this video up so you can
0:36
see here that tail and CSS very simple
0:40
you can make attractive UI designs right
0:43
so let's first I'm going to go to
0:46
Laravel 12 installation just type
0:48
Laravel 12 install
0:54
ation so I'm going to install the Larl
0:56
tool so you have to type by this
1:00
command open up F drive you have to make
1:03
the folder
1:08
Laravel tail
1:14
wind
1:16
cmd paste on it
1:20
it's
1:21
installing how you have to write this
1:23
one L new example app you just copy this
1:26
command uh you have to paste on it here
1:29
I'm going to I I not yet change the name
1:32
i just paste it you have to change the
1:34
name what is the project name you have
1:36
to create it okay so here you have to
1:38
write uh you have to write past no
1:40
problem okay so paste press enter
1:46
key right you have to type you have to
1:48
wait until the installation has been
1:56
complete here is a simple processing
1:58
install the
2:01
lar
2:05
so after that you have to select the SQL
2:08
which which one you go along with i'm
2:10
going to along with go along with my
2:12
project using MySQL so I just copy the
2:16
here you have to type
2:18
MySQL press enter key i type wrong you
2:22
have to type
2:28
as you have to write do you like to run
2:31
the default database migration so you
2:34
have to first what I'm going to I'm
2:35
going to connect to open my
2:41
zam start start
2:47
now I'm going to pick
2:51
yes would you like to run the default
2:54
database connection if your default
2:56
database connection
2:59
uh write
3:03
yes default it is create as example app
3:06
this is a default database it is okay
3:09
everything is done successfully right
3:13
okay you have to wait everything done
3:16
successfully this we have simple way to
3:18
install the laral
3:21
to it as no along with the npm install
3:25
i'm going to the at the moment I'm going
3:26
to select
3:29
not okay right now what I'm going to say
3:32
is now my project is created
3:34
successfully i go inside the folder so
3:37
we have type change directory
3:39
cd example
3:44
sample now a code space dot to open my
3:48
project in VS code
3:51
editor simply it will be open
3:54
now uh this is your folder structure and
3:58
file
3:59
structure now let's go open up new
4:05
terminal so type PHP artisan
4:15
so okay now let's copy this
4:20
port paste on it
4:26
here this is your welcome page of Lar
4:30
this is the welcome page of Lar now what
4:32
I'm going to do is here I'm going to uh
4:35
implement the Tailwind CSS it's very
4:39
simple
4:41
go to here instead of here I need a
4:44
login form so very simple in order to
4:48
make it so I'm going to go to here i'm
4:51
going to make it
4:53
uh
4:55
tail when
5:00
CSS
5:04
CSS okay so the TS everything are there
5:07
you can see here now I'm going to do it
5:09
first I'm going to need
5:11
a
5:13
login
5:17
here you can see the there you can get
5:20
it here click on
5:23
that you can have here this is the
5:27
login just simple here there are many
5:31
login for look you will be able to see
5:33
okay if you go along with this one first
5:35
you just get
5:37
code so here this one should be not uh
5:44
uh free they asked to buy the here so we
5:48
can get the free one as well free one we
5:50
have to get the free one as well uh this
5:51
is this one is free other we have to pay
5:54
the money this first one should be free
5:57
okay you don't pay this one we have to
5:59
get all things are free this one we get
6:01
the free one okay so let's
6:03
check have to copy
6:05
this so copy the code so copy this is a
6:09
preview this is a code okay you just
6:10
copy this code
6:13
and you go to your
6:17
project your project is running so first
6:21
you have to go to the views folder okay
6:23
the for resources views
6:27
welcome here this is Java welcome page
6:30
you can see over here okay so here what
6:34
I'm going to do is I'm going to go to
6:38
place this
6:40
code okay so what I'm going to do is I'm
6:43
going to this all things I don't need
6:45
them i
6:48
just delete them okay delete them i just
6:51
delete them right so I'm going to
6:55
here hold on shift key down and press
6:58
one key on your keyboard you have to
6:59
implement the HTML over here
7:07
right inside the body I'm going to paste
7:10
this code that's it now you paste the
7:13
code and check whether it's working fine
7:15
or not but it's not working
7:19
fine it is coming without style you can
7:23
see it's it's display but without style
7:27
okay so we have to implement the style
7:29
so I'm going to implement the style you
7:31
just
7:33
type with
7:35
CSS
7:38
CDN you can see here it's a FL CDN click
7:42
on
7:43
that okay so you have to implement the
7:46
CDN here this one
7:48
this CDN just copy this okay you have to
7:53
paste on it
8:01
they
8:02
made CSS and JavaScript both in wine
8:05
file okay now let's save all and you
8:08
have to bring back to the application
8:09
and
8:10
check here it's working
8:14
fine this how simple you have to
8:16
implement your design very simple here
8:20
everything is working according to your
8:22
way very simple right so now I want to
8:28
add the n bar in my
8:31
project okay this a new bar so after add
8:33
the n bar okay the above the above this
8:37
page I need a n bar so what I'm going to
8:41
rest this also we can add it go to my
8:46
tail with
8:47
[Music]
8:49
CSS
8:53
new i have to go to the
8:57
official okay this one the same part
9:00
okay this one the first one should be
9:03
free the rest of the all the things we
9:05
have we have to get paid okay we have to
9:07
get the paid so we have to uh go along
9:10
with the free one copy
9:12
this right the code you have to paste it
9:15
above this
9:17
code above this code you can have it
9:21
bar right so the bar your favorite and
9:26
bring back to bring back the
9:29
application this
9:31
one right here your n bar is coming
9:37
successful okay so simple way we have to
9:41
implement your project
9:44
the simple way we have to implement your
9:47
project right this how we have
9:49
implemented simple way so we have to you
9:50
have to make the changes and do your
9:52
application very simple here you have to
9:54
change your logo and yeah what you what
9:57
you need you have to change everything
9:58
accordingly we have to make the uh
10:01
website very simple way using the tail
10:03
CSS plus lar okay so this one we have we
10:09
are uh in my next class I'm going to
10:11
teach how to simply we have to make the
10:13
website using uh tailwind CSS and using
10:16
the simple project everything we have
10:19
teach from the scratch thank you for
10:21
watching