Up next in 10
How to Setup Tailwind CSS 4 in Meteor 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:04
integrate the latest version of Tailwind
0:06
CSS 4.0 inside your metor application so
0:11
I've just initialized the sample meteor
0:13
project meteor create and then the
0:16
project tape so it is just installing
0:18
the dependencies so we will be following
0:20
this official documentation which is
0:23
provided by Tailwind CSS
0:26
4.0 so they have given the stepbystep
0:29
instruction on how to integrate the
0:31
Tailwind CSS with meteor so I will be
0:34
just be following this blog
0:36
post so after this project initializes
0:40
we will open it inside vs code so now it
0:43
has initialized it now we need to CD
0:45
into this directory so CD my project
0:49
meteor 1997 so let me open it inside vs
0:54
code so this is your sample meteor
0:57
project
1:00
and now the next step is to install the
1:03
necessary packages so they have given
1:05
this command so let me copy it and paste
1:08
it and let me show you so npm install
1:11
Tailwind CSS for first of all we need to
1:14
install Tailwind then the plugin at
1:17
theate tailin CSS / post
1:20
CSS uh post CSS post CSS dload Das
1:24
config so these are the four packages
1:26
you need to install and simply enter it
1:29
and now it will install the
1:33
package and once it's installed open the
1:36
package.json file you will see we are
1:39
using the latest
1:40
version
1:43
so it is there inside the dependency
1:46
section
1:48
so we using the latest version of tailin
1:50
CSS
1:53
4.0 and then what we need to do you need
1:56
to create a post CSS config do and M GS
2:00
file here right in the project directory
2:03
just create here post CSS config
2:08
MGS file and you just need to paste this
2:12
code here that they have given so just
2:15
paste
2:16
it just create this file first of all in
2:19
the root of the directory of the project
2:21
and then you need to paste this
2:26
code so after you do this you need to go
2:30
to
2:31
the CSS file which is located in the
2:34
client folder you will see this main.
2:37
CSS file and here you just need to paste
2:40
add theate import it double quotes
2:43
Tailwind CSS and put a semicolon so this
2:47
is actually the code that you need to
2:48
paste inside the client folder main.
2:52
CSS and then you need to go to the
2:56
app.jsx wherever you need to use your
2:59
this is
3:07
your the UI section this is your see
3:10
that app J
3:11
jsx so here I will
3:15
paste sample Tailwind CSS code so we are
3:19
showing a simple hello world message we
3:20
are using the Tailwind CSS classes if
3:22
you
3:23
see and now to uh start your project we
3:27
execute the command npm Run start so
3:30
this will start your M your
3:33
project and uh is just preparing the
3:36
project so just wait for the
3:38
installation to
3:45
finish so by default it will open your
3:48
project in the local development server
3:51
so just
3:52
wait for the server to start
4:20
so for the very first time it takes some
4:21
time to start the server and after that
4:24
it will just restart if you make any
4:26
sort of changes
4:58
so it is just building out the
5:00
application guys just wait for the full
5:02
build to complete
5:49
uh this having some kind of error let me
5:53
see what is
6:05
uh but the process is very simple guys
6:08
you just just follow the step by-step
6:11
instruction uh there was just kind of
6:13
error this is related to the application
6:16
not the Tailwind so the process is
6:19
simple you can directly follow the step
6:21
by-step instruction it is also given in
6:23
the official documentation as well to
6:26
integrate tent CSS and videoos so thank
6:28
you very much for watching this for you