Up next in 10
How to Fix Tailwind CSS 4 & 3 Installation Error Resolving 'npx tailwindcss init p' npm in VSCode
Jun 7, 2025
Buy the full source code of application here:
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 fix
0:04
this error message inside your react
0:06
project V react project if you type the
0:10
npx Tailwind CSS in it command so if the
0:13
command is not successful if you are
0:15
getting this error message this is quite
0:17
normal you are going uh you are watching
0:20
the correct video in this video I will
0:21
show you how to fix this error message
0:24
the main reason of this command not
0:26
successful guys as you all know Tailwind
0:29
has released a latest version which is
0:32
Tailwind CSS 4 which is drastically
0:34
different from the older version so
0:37
that's why if you are using the latest
0:41
version which is Tailwind CSS 4 then
0:43
this command will not be successful this
0:47
is only available for the older versions
0:49
so this is my react Ved project if you
0:52
see we are using the latest version of
0:53
react and we are also using vat
0:57
development engine and as you can see we
0:59
are using the Tailwind CSS 4.0.1 7
1:03
so this is slightly different if you uh
1:07
want to use this command as you can see
1:10
this command is only available to the
1:12
Tailwind CSS atate 3 so now if you want
1:15
to use this command you need to
1:17
downgrade your Tailwind CSS version from
1:19
the latest version which is 4.0.1 7 to3
1:23
so now just go to the command line and
1:25
just
1:26
simply downgrade the version and just
1:31
write this command add the rate three so
1:34
just add this npm
1:37
i-g for adding it as a Dev dependency
1:41
Tailwind CSS at the rate three so this
1:45
will actually downgrade your Tailwind
1:48
CSS and it will download the older
1:51
version which is 3.4.1 7 so just make
1:54
this change and if you again type the
1:58
same command and n PX Tailwind CSS in it
2:02
if you type the same command now
2:04
hopefully the command will
2:07
work it will actually on the left hand
2:09
side it will create these two files you
2:11
will see created Tailwind CSS config
2:15
file you can see it has created this
2:17
file here trailwind config.js
2:21
file so in this easy way guys you can
2:24
fix this error message you just need to
2:27
downgrade your Tailwind CSS if you using
2:30
the latest version you just need to
2:32
downgrade to the third it is also
2:35
mentioned on their documentation as well
2:37
so if you go to it you will see they
2:40
have this is the version 4 which is a
2:43
latest version but this is actually the
2:46
3.4.1 7 version so this command will
2:49
work only this Tailwind CSS 3 version so
2:53
in the latest version they have
2:55
drastically changed the structure if you
2:58
want to use the Tailwind CSS 4
3:02
then this is slightly different but if
3:04
you want to use that command this
3:06
command then you just need to
3:09
downgrade that inside your that I showed
3:13
you the command here so you just need to
3:15
use this version 3.4.1 7 so hopefully
3:19
the error was
3:22
fixed by watching this video guys so if
3:25
the error has been fixed then please hit
3:26
that like button subscribe the channel
3:28
as well and also check out my website
3:30
free mediat tools.com uh which contains
3:34
thousands of tools regarding audio video
3:36
and MH and I will be seeing you in the
3:39
next video