Up next in 10
How to Setup TailwindCSS 4 in React.js Vite Project in Visual Studio Code Full Project For Beginners
Feb 12, 2025
Get the full source code of application here:
https://codingshiksha.com/tutorial/how-to-setup-tailwindcss-4-in-react-js-vite-project-full-working-project-for-beginners/
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 friends welcome to this video
0:02
so in this video I will show you how to
0:04
set up the latest version of Tailwind
0:06
CSS which is 4 which is released
0:10
recently uh weeks ago so we will look at
0:13
how to implement this inside a simple
0:16
react CHS project inside V development
0:19
environment in vs Cod so this is my
0:22
react CHS project here running and uh I
0:25
will show you step by-step instruction
0:26
how to get started here so I will simply
0:28
close everything and start from scratch
0:31
so I have also written a complete blog
0:34
post on my website coding.com so the
0:36
link is given in the description you can
0:38
follow this blog post alongside with
0:40
this video so first of all you need to
0:43
create a new directory so new V project
0:48
so I will simply say npm
0:51
create V at the rate latest and the name
0:56
of the project so let me say Tailwind
1:01
sample-- template react so we are
1:05
building a react app here so as soon as
1:07
you execute this command here let me
1:10
zoom in so all these commands that I'm
1:12
there is given in my blog post you can
1:15
simply copy this so after this you need
1:18
to select which uh project you're
1:21
building so we'll be building the react
1:23
project so we'll be choosing the
1:25
typescript language so typescript as
1:28
soon as you do this you just need to
1:30
navigate into the tail vent project and
1:34
then simply say npm install so this will
1:36
install all the packages which are
1:39
required for building the react Chas
1:41
project it will create a node modules
1:44
folder and after this we will open the
1:47
project in
1:48
the visual studio code so just wait for
1:54
the node modules to
1:58
install so recently many guys developers
2:01
are facing problems in implementing
2:03
Tailwinds the latest version which is
2:05
four it is drastically
2:08
different from the previous version so
2:11
now this is actually a sample project if
2:13
you see we have this file V.C config do
2:16
typescript and we have a sample nodejs
2:20
oh sorry react project so first of all
2:23
the very first step we need to do you
2:25
can simply copy the commands here can go
2:27
to the blog post the link is given in
2:29
the
2:30
description the next step is to install
2:32
the Tailwind CSS and the Tailwind CSS
2:35
vat so you can copy this command copy to
2:38
clipboard and simply paste it inside
2:40
your command Lin so npm install Tailwind
2:43
CSS atate Tailwind CSS vat so these two
2:47
packages you need to install it so just
2:49
install it so this is actually the first
2:52
step and after that step you need to go
2:55
to your this file here which is v.on
2:59
conf. typescript file here and just open
3:03
this file and right here inside this
3:05
file we need to import the
3:08
Tailwind CSS which will be imported from
3:12
this plug-in that we installed right
3:15
here at the rate tailin CSS V so just
3:18
make sure that you import this after
3:20
this right inside the plugin section you
3:23
need to come right here and just add the
3:25
Tailwind CSS plugin that's all that we
3:28
need to do right here this this is all
3:30
only this change now you can close this
3:32
file and then you need to come to the
3:36
this index. CSS file of your project the
3:39
base CSS file and delete everything from
3:42
here and just write here at the rate
3:45
Import in double quotes Tailwind CSS and
3:49
put a semicolon that's all that we need
3:52
to write
3:53
here and now after that you come to the
3:56
app. TSX files here this is your base
4:00
component just make a simple functional
4:02
component right here and what I will do
4:05
I will simply paste a sample code of
4:08
Tailwind CSS
4:10
holding we are using Tailwind classes so
4:13
we are using these Tailwind classes if
4:15
you see so now if I open the result in
4:18
the browser you will see that npm run
4:21
Dev
4:23
so if you open the project Here Local
4:26
Host
4:28
5173 you will now now see the Tailwind
4:30
CSS 4 so in this way Tailwind CSS is
4:34
perfectly working in this wheat react
4:36
Chase project using typescript and uh I
4:40
also given this GitHub repo guys you can
4:42
easily clone this so go to the blog post
4:45
and at the bottom side after you will
4:47
see the GitHub repo you can simply clone
4:49
the GitHub repo and just make sure guys
4:52
uh one error you may get just update all
4:56
the vat version so let me show you my V
5:00
version right here so you must have
5:04
vat at least the latest version which is
5:08
6.1.0 at the time of recording this
5:10
video and the node version is 20.9
5:13
point0 so if you have a old wheat
5:16
version let's suppose five you will get
5:18
this error in Tailwind CSS 4 so I
5:21
basically got a lot of error because my
5:23
wheat version was old so you should have
5:26
at least
5:27
6.1.0 vat version
5:30
and uh let me also show you the react
5:33
version that we are using in the
5:35
package.json which is the current
5:38
version which is 19 and this is actually
5:41
the version so whenever you clone the
5:43
repo you will basically go to the
5:45
description link and just get a loan
5:47
this
5:48
repo and
5:50
uh you can even just update V to the
5:53
latest version just type this command
5:56
npm I V at theate latest bash G so this
6:03
will update the V to the global version
6:05
so like this so you can check your be
6:08
version like this from this command
6:11
6.1.0 so thank you very much guys for
6:13
watching this video and uh also visit my
6:16
website which is free mediat tools.com
6:18
uh which contains thousands of tools
6:21
regarding audio video and image and I
6:24
will be seeing you in the next video
#Programming
#Software