Up next in 10
How to Setup Tailwind CSS 4 in Next.js Project in Visual Studio Code Full Project For Beginners
Feb 12, 2025
Get the full source code of application here:
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
integrate the latest version of Tailwind
0:06
CSS which is 4
0:08
version inside your next JS application
0:13
so we will be following this official
0:15
documentation on Tailwind CSS they have
0:17
given this stepbystep guide so I'm there
0:20
inside my command line and I will just
0:22
copy this command that it given
0:25
me and just paste this command so this
0:28
is the actual command here
0:30
npx create next app and at theate latest
0:35
so we are using the latest version of
0:36
create next app and Then followed by
0:38
your project name and then we are using
0:41
typescript for this-- typescript ES
0:44
link-- app this is a command here uh let
0:48
me change the project name to next
0:52
project you can give your own name so
0:55
after you execute this command it will
0:57
install the
1:00
create next app so it will ask you that
1:02
need to install the following packages
1:03
so you'll just say yes so I just want to
1:07
start from scratch so I'm just telling
1:09
you all the steps you need to follow and
1:11
then it will tell you would you like to
1:13
use tailin CSS and by default the option
1:16
is yes so you will simply say yes would
1:18
you like to your code inside a source
1:21
directory so just select all the default
1:23
options would you like to use turbo pack
1:25
for Next Step so just select yes and
1:29
would you like to customize the import
1:31
LS I will say no and then it is
1:33
installing the dependencies so we're
1:36
just using the latest
1:38
version right here you can see now it is
1:42
installing these dependencies this is
1:45
your Tailwind CSS the latest version
1:47
post
1:48
CSS all these things so once it is done
1:51
we will open this project inside the vs
1:53
code so just wait for the installation
1:55
to complete so it typically takes around
1:58
15 to 20s seconds depending upon your
2:01
internet
2:05
connection so it's very easy uh uh last
2:09
month tailin CSS released a new wer
2:11
which is drastically different from
2:13
Tailwind CSS 3 so you can see it has
2:17
created this project so you just need to
2:19
navigate to this project here CD next
2:22
project 1987 so I will just now open
2:27
this project inside the vs C
2:30
so this is actually the directory
2:31
structure we are using the typescript
2:33
here if you
2:34
see so if you now want to run this
2:37
project so if you open the package.json
2:39
so we are actually using Tailwind CSS
2:43
which is
2:45
3.4.1 but we need to use the latest
2:47
version which is the tailn CSS 4 for
2:50
doing this what we will do I will simply
2:53
remove this Tailwind CSS and post CSS
2:57
just remove from here and we'll manually
3:00
be installing Tailwind here so just
3:02
remove it and then update and simply
3:06
type this command npmi so this will
3:08
remove that package so that package is
3:11
removed now we will
3:14
be following this
3:16
documentation and just copy this command
3:20
and paste it inside your command line so
3:22
it is explicitly
3:24
telling install this latest version so
3:27
if you just type now you you will see it
3:31
will install the package and you will
3:34
see it will install the latest version
3:37
which is
3:38
4.0.5 and this is also Tailwind CSS post
3:41
CSS 4.0.5 and the post CSS version so we
3:45
are using the latest version of react
3:48
which is 19 and now the command is
3:51
simple to run the project which is npm
3:53
run Dev so before running this we need
3:56
to make some configuration for Tailwind
3:58
CSS so just create a file here post CSS
4:02
config MJS file so right inside your
4:05
root of your project right
4:07
here so it is already created this file
4:10
here so let me just remove this
4:15
and again create this just inside your
4:17
root of the directory if the file is not
4:19
created then create post CSS config MJS
4:24
this is actually the file here the icon
4:26
will change to this post css. config mg
4:29
j s so then you just need to copy this
4:33
code that it provides you right click
4:36
and paste this
4:38
code so after you pasted the next
4:41
operation is you need to go to your
4:43
Global CSS file which is located in the
4:46
source and the app directory and simply
4:48
copy this line and paste it so this is
4:51
your if you see this is the file here
4:54
global. CSS so just add this line here
4:58
which is
5:01
at theate import Tailwind CSS in the
5:03
previous version if you see in this way
5:05
we imported Tailwind CSS but in tailin
5:08
CSS 4 we need to update this to this
5:11
which is at theate Import in double
5:13
codes you write tailin CSS semicolon
5:16
that's all so this is a drastic
5:18
difference and then you need to go to
5:22
your this uh file here which is the page
5:27
file so just update everything and let
5:30
me just remove
5:33
this and replace it with this hello
5:36
world message so here we are using the
5:38
Tailwind CSS classes right here so if
5:41
you
5:42
see if you want to now run this project
5:45
just execute the command npm runev so
5:48
this will start your next year's server
5:50
on Local Host 3000 so here if you if I
5:55
go to the project Local Host 3,000
6:00
so just wait for the compilation to
6:02
complete and now you will see that
6:09
guys uh no this is not an error you can
6:14
see the Tailwind is applied you can
6:16
click the cross icon you will see this
6:18
classes have been successfully applied
6:21
and uh this is your underline class I
6:23
can change the size of the text here
6:25
let's suppose 4 XEL so now the heading
6:28
will be larger
6:32
so you can just see as I'm making
6:35
changes to the Tailwind CSS classes you
6:38
can see it is reflecting the
6:40
changes and
6:45
uh so in this way you can
6:48
integrate
6:50
the Tailwind CSS so you can even make
6:55
let's suppose a advanced example of
6:57
using Tailwind CSS let me put put a card
7:02
structure uh Advanced card let me paste
7:05
this one instead of this hello world
7:08
message let me paste
7:11
this format and you will now see this is
7:15
a simple card like
7:17
structure so in this way you can use
7:20
tailin CSS inside your next year's
7:22
project so I showed you from scratch
7:25
guys we followed the step by-step
7:27
instruction in this documentation of the
7:29
official website Tailwind css.com you
7:31
can follow this documentation as well so
7:35
in this way you can integrate Tailwind
7:36
CSS and run it and thank you very much
7:39
for watching this video and also check
7:41
out my website as well freeat tools.com
7:44
which contains thousands of tools
7:46
regarding audio video and image and I
7:49
will be seeing you in the next video
#Programming
#Development Tools
#Computer Education