Up next in 10
How to Setup TailwindCSS Intellisense & Autocomplete Extension For Visual Studio Code IDE Editor
Jul 14, 2025
Get 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'll show you how to set
0:03
up Tailwind CSS intellisense and
0:06
autocomplete extension for VS code. So
0:09
there is an extension here which is
0:11
developed by official Tailwind CSS
0:15
developer. So if you just write here
0:16
Tailwind CSS, the very first extension
0:20
will come right here. Uh it's Tailwind.
0:24
If you just say Tailwind IntelliSense.
0:28
So it's basically developed by the
0:29
Tailwind company here and Tailwind CSS
0:32
IntelliSense and autocomplete.
0:35
So it's got almost 11 billion installs.
0:38
So it provides you with all the Tailwind
0:40
classes as you type inside your HTML
0:42
code. No need to remember all those
0:44
Tailwind classes inside. Click the
0:47
install button. And once you activate
0:49
this extension, go to your HTML code
0:52
right here. wherever you are developing.
0:55
So right here uh you basically include
0:59
the Tailwind CSS CDN.
1:02
So just you go to the Tailwind CSS CDN.
1:08
So after including the CDN it will
1:10
basically have everything
1:14
just include this script tag. This is
1:16
your Tailwind CSS CDN. Now if you type
1:20
give it a class attribute here.
1:25
So as soon as you start to write the
1:28
class names it will show you this. Uh
1:35
so I think you just need to restart your
1:37
machine as well.
1:42
In order to for the extension to
1:43
activate, you must have the Tailwind CSS
1:46
installed and one of these a CSS file
1:50
that imports a Tailwind CSS stylesheet.
1:56
So yeah, so for the autocomplete to
1:58
definitely work here,
2:01
you basically want a
2:04
for Tailwind CSS versions 4, which is
2:06
the latest version, you need a CSS file
2:09
that imports it. So I think they have
2:13
given this if you just write on Google
2:15
Tailwind CSS 4 in VS code.
2:22
So quite a number of articles will come
2:24
right here. So for the CSS 4 version
2:28
you need this config file.
2:37
So just wait. Let me just ask how to set
2:40
up.
2:58
So after installing the Tailwind
2:59
IntelliSense extension, you need to
3:03
basically install Tailwind CSS in your
3:05
project. So this is the command that you
3:07
need to install here. npm install dash.
3:11
So wherever you are developing your
3:13
project, go to your terminal and uh
3:20
you say npx I think. Yeah. So npm
3:24
install
3:27
dash d as because this will be installed
3:30
as a dev dependency. So tailwind
3:34
csl. So this is a command here npm
3:37
install-g
3:39
d tailwind CSS. So this simply install
3:42
this as a dev dependency and then
3:45
initialize the Tailwind CSS by this
3:47
command. So this will create a Tailwind
3:49
config file here. So inside your
3:52
package.json file if you see your
3:57
Tailwind CSS has been installed. And
4:01
after that
4:06
what you need to do is simply say
4:11
npx
4:13
tailwind.
4:18
So just execute this command here.
4:22
So this will create a tailwind.
4:29
So it is saying that invalid.
4:48
So entailment the CLI was simplified and
4:50
the init command is no longer used. So
4:52
yeah. So after that you just need to
4:56
check the version manually create this
4:58
file here which is Tailwind config.js
5:01
file.
5:03
So what you need to do right here
5:05
wherever you're developing your project
5:07
simply create this file tailwind config
5:10
js file and simply copy paste this code
5:13
here that I'm showing you.
5:16
Simply pause the video and simply write
5:18
this code here. So we are including the
5:21
intellisense inside this index.html file
5:24
here.
5:26
So after doing this
5:34
you basically include a CSS file here.
5:42
You can directly write wherever you want
5:45
to use. You can include this
5:53
add the tailwind base components
5:55
utilities. And now if you try to use
5:58
this
6:24
Just create a source folder inside this.
6:27
Declare the styles
6:29
style dot CSS and write
6:34
just paste this code here inside this
6:38
file.
6:58
So after that go to the terminal and
7:09
so now it will create a dist folder
7:11
which will have this
7:14
tailwind CSS. So right here in the index
7:18
html file, you just need to include
7:20
this.
7:44
So now the autocomplete should work.
7:48
successfully.
8:01
So in this easy way you can set up
8:03
Tailwind CSS
8:08
and also check out my website
8:10
freemediattools.com
8:12
uh which contains thousands of tools.
#Programming
#Software