live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
How to Setup Tailwind CSS 4 in SvelteKit Vite Project in Visual Studio Code 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:03
integrate the latest version of Tailwind
0:05
CSS 4.0 inside swelt kit which is a
0:10
framework for building
0:12
swelt web application so it's a famous
0:15
framework swelt swel kit this is a name
0:19
of the framework so I am there on the
0:21
official documentation of Tailwind CSS
0:24
they have given this step by-step
0:25
article I will follow this article so
0:28
just go to your command line and execute
0:30
this command
0:31
npx SV create and Then followed by your
0:35
project name uh let me
0:41
just so just is installing the
0:43
dependency so just wait for
0:46
the Press y here okay to proceed and
0:49
then it is asking you that welcome to
0:51
the SW CLI which template you would you
0:53
like to use so I will simply say SW kit
0:58
uh minimal so
1:02
or you can
1:03
simply showcas app with a word guessing
1:06
G that works without JavaScript so I
1:08
will simply select the minimum setup and
1:11
add type checking with types script I
1:14
will say
1:15
yes what would you like to add to your
1:18
project I will say prit here which
1:21
package manager simply select npm so
1:24
just go with the default options and
1:26
create this basic SW kit project so it
1:29
is just in installing the dependencies
1:31
and after that we will open this inside
1:34
the visual studio code and then set up
1:37
the tailin CSS
1:41
4.0 so we are all set here we will
1:43
navigate to the project
1:47
folder and after this we will open it
1:52
inside the vs code and the very first
1:55
thing we need to do
1:58
uh if you follow follow
2:01
the step by-step article you need to go
2:04
to the command line and install this
2:08
npmi Tailwind CSS atate Tailwind
2:12
cssv just execute this command and what
2:15
this will do it will install the latest
2:17
version of Tailwind CSS inside the
2:21
dependency section if you see it has
2:24
installed
2:26
4.0.5 let's see that so after do this
2:30
you need to go to
2:33
your this file which is vconfig dots
2:37
file and here you need to require the
2:41
Tailwind CSS plugin so just copy
2:46
this and paste this and now in the
2:49
plug-in section if you see this plugin
2:51
section we just need to add this
2:53
plugin so Tailwind
2:57
CSS so in this way you can add this and
3:02
after this you need to go to the CSS
3:05
file of your project which is located in
3:07
the source
3:11
directory this is your app.
3:20
HTML uh normally this file will be
3:23
located in the source directory you can
3:26
just create this file uh just create
3:28
app.css
3:30
and
3:31
simply paste this code here import
3:36
Tailwind CSS and put the semicolon so
3:41
just write this inside this app.
3:44
CSS and uh then whatever is your
3:49
layout you just need to import this file
3:52
so WR in the routes folder if you see
4:03
so I
4:09
think yeah so they have given this
4:16
uh just need to create this layout
4:20
file so in the source directory in the
4:22
routes directory if you see you need to
4:25
create this file here for the layout
4:31
and just paste
4:38
this so what we are doing that we are
4:41
importing the CSS file here which is
4:43
present uh this is actually the file
4:46
app. CSS so we are importing this file
4:50
and rendering the children so this is
4:51
our layout
4:57
file and
5:00
now for start using the project we can
5:02
simply go to
5:04
the this page. SW file this is the file
5:08
here and copy paste a simple basic
5:11
Tailwind CSS classes right here a hello
5:14
world message we are using these
5:15
Tailwind classes and now in the style
5:18
code we referencing this Tailwind CSS SL
5:21
theme and you can even change the
5:24
background color so if you want to run
5:26
this project simply type the command npm
5:29
run
5:30
this will start the development server
5:33
on this Local Host
5:36
5173 so if you go to this
5:41
route you will now see uh hello world
5:45
message is showing this is the Tailwind
5:47
CSS right right here if I increase it to
5:50
5
5:51
Exel you will see the size will increase
5:54
if I remove the underline class the
5:56
underline will be
5:57
removed so in this way you can use
6:01
Tailwind CSS inside swell kit you can
6:04
even paste a little bit Advanced example
6:07
which is a card-like structure in the
6:09
middle of the screen so we are all you
6:11
can see we are using these Tailwind
6:16
classes so in this easy way guys you can
6:18
follow the step-by-step video I showed
6:20
you and you can integrate the Tailwind
6:24
CSS inside the swell kit and for the
6:27
reference you can follow this step byep
6:30
documentation that they have given for
6:33
integrating it for swel Kit I showed you
6:36
step by step instruction on how to
6:39
integrate Tailwind CSS 4 and swell kit
6:43
so thank you very much for watching this
6:44
video and also check out my website as
6:47
well uh free mediat tools.com uh which
6:50
contains thousands of tools regarding
6:53
audio video and image and I will be
6:55
seeing you in the next video