Up next in 10
How to Setup Tailwind CSS 4 in SolidJS 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 inside the solid JS
0:09
framework solid JS is also a very
0:12
popular framework so I will be following
0:14
this Tailwind documentation they have
0:17
given a complete article on how to step
0:19
by step integrate Tailwind CSS and solid
0:22
JS so the very first step we need to
0:25
create a brand new so JS project so just
0:28
execute this command npx digit solid JS
0:32
/ templates sljs followed by your
0:36
project name so let me change this
0:38
project
0:39
name to this so as soon as you hit this
0:43
command it will install the packages
0:44
which are required for building solid JS
0:47
project so just wait for the
0:48
installation to complete so it will
0:51
clone a brand new solid JS project then
0:54
we will open it inside vs
0:57
code so recently ta event has released
1:01
the 4.0 version which is drastically
1:04
different from the previous
1:07
versions so that's why developers are
1:10
facing problem in integrating it so in
1:13
this video I will show you step by step
1:16
so so now it has cloned it so we will
1:19
navigate to this folder which is my
1:22
project solid 1987 so now just open it
1:27
inside vs code so this is will be the
1:29
directory structure you will see
1:32
that a basic solid JS project and it
1:36
uses JS jsx by default if you see it's
1:39
very similar to react
1:41
JS solid JS so the next step will be to
1:46
install Tailwind CSS they have given
1:48
this instruction so just execute this
1:50
command npm install Tailwind CSS and at
1:54
theate tment CSS slwe so just execute
1:58
this command and what this command will
2:01
do if you go to the package.json file it
2:04
will install the latest version of
2:06
Tailwind
2:08
CSS so if you
2:11
see which is
2:13
4.0.5 the latest version so the next
2:15
step after this you need to open your
2:18
configuration file which is your V.C
2:21
config.js
2:30
and then add
2:32
this we already have the solid plugins
2:36
so just add this line here import
2:38
Tailwind CSS from this plugin at the
2:41
Tailwind CSS
2:43
SLV after that you just need to go to
2:45
the tail uh plug-in section so this is
2:47
your plugin section just add this plugin
2:50
which is your Tailwind CSS parenthesis
2:54
so we are just adding this Tailwind CSS
2:57
plugin and now the next step is to
3:00
go to your index. CSS file whatever is
3:04
your CSS so this is actually the file go
3:07
to this file and delete everything and
3:10
just add this line add the rate Import
3:13
in double codes tailb CSS semicolon so
3:17
we just need to write this inside double
3:19
quotes so that's all that we need to do
3:22
for the configuration and now you can
3:24
use your Tailwind CSS so just go to your
3:27
template the jsx file right here and
3:31
just add this simple hello world message
3:34
which is using the Tailwind classes all
3:36
these classes so if you want to run this
3:39
project just run the command npm runev
3:43
this will start the development server
3:44
on Local Host
3:47
3,000 and you will see the hello world
3:49
messages showing right here I can
3:53
actually put five here the heading will
3:56
be larger and we can even just paste an
3:59
advance example which is also made using
4:02
Tailwind CSS a simple card-like
4:05
structure so you can see that so in this
4:08
way you can actually integrate Tailwind
4:11
CSS and start using it inside your solid
4:14
JS project it's very easy it's very much
4:16
similar to react
4:18
JS but in this case we are using solid
4:21
JS the process Remains the Same we
4:24
install this packages we add the plugin
4:27
in the configuration file and directly
4:29
add add the CSS code as well add the
4:31
rate import so you can follow the
4:33
stepbystep instruction and also visit my
4:36
website as well free mediat tools.com
4:38
which contains thousands of tools
4:40
regarding audio video and image and I
4:43
will be seeing you in the next video
#Programming