How to Setup Tailwind CSS 4 in Angular 19 Project in Visual Studio Code Full Project For Beginners
256 views
Feb 12, 2025
Get the full source code of application here: https://github.com/manthanank/angular-tailwindcss 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/
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so 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 your angular
0:09
application so I am there inside the
0:12
command line so I will just create a
0:14
brand new angular project so I if you
0:18
see we are using the latest version of
0:21
angular which is at the time of
0:23
recording this video is 19 angular 19 so
0:26
you should have this latest version so
0:29
Tailwind ss4 works with the latest
0:31
version of angula so we create a simple
0:36
project here with this command NG new
0:38
followed by your project name and then
0:41
the stylesheet that you want to use
0:43
which is the
0:44
CSS this is the command here simply
0:47
execute this
0:48
command and then it will ask you some
0:51
questions that you want to enable server
0:52
site
0:53
rendering so for this basic project I
0:56
will say no and then it will create this
0:59
uh
1:00
angular project it is just installing
1:02
the node GS packages so just wait for
1:05
the process to finish and after that we
1:08
will open this project in vs code and
1:11
then step by step I will show you how to
1:13
integrate the Tailwind CSS
1:16
4 so it hardly takes 30 seconds I
1:23
think
1:25
so recently last one Tailwind released
1:29
this 4 4.0 version which is drastically
1:31
different from the previous versions so
1:35
that's why many developers are facing
1:38
problems in integrating
1:39
it and then let me open it inside vs
1:44
code you will see that is a basic angula
1:48
project and uh if I show you the
1:51
package. Json file so you can see that
1:56
the latest version we are using 19.10
2:00
so you also need to enable the install
2:04
the latest version so you can directly
2:06
do this using npm command so update the
2:11
angular CLI to the latest version using
2:13
this
2:14
command if you face any problem so npmi
2:18
dgate angular / CLI theate latest so it
2:22
will update your angular CLI to the
2:24
latest version and then create the
2:26
project and then the next step is to
2:30
install the Tailwind CSS plugin
2:33
so in the docs here they have given this
2:35
command so I will just copy this
2:37
command and simply paste it
2:43
so just enter you will see it will
2:46
install these
2:48
packages so now the package is installed
2:51
if you check your package.json file you
2:54
will see this we are using the latest
2:56
version which is
2:58
4.0.5 post
3:01
CSS and this is a plugin SL atate tailin
3:06
CSS post
3:09
CSS and after this you need to create a
3:12
file here inside the root of the project
3:16
so just go to right here and just create
3:18
this file Dash poost cssrc do
3:23
Json so it will change to this icon so
3:26
this is actually the file
3:28
here and and here you just need to paste
3:31
all this which is mentioned right here
3:33
just paste
3:38
it so then we need to go to your Source
3:41
folder and inside this there is a
3:43
styles.
3:44
CSS file
3:47
here so in the source directory you will
3:49
see this file styles. CSS this is your
3:52
Global style sheet so simply paste this
3:56
code here add theate Import in double
3:58
quotes stnd C
4:01
so now you will be able to use Tailwind
4:05
CSS so simply go to your template file
4:08
which is app. component.
4:11
HTML and just delete everything and
4:14
paste this here this is a basic Tailwind
4:17
classes that we are using here a simple
4:19
hello
4:20
world heading so just run this
4:24
application now NG Ser so it will start
4:27
your application
4:30
at Local Host 4200
4:34
so you will see that so if you try to
4:37
open this application
4:40
now you will now see the Tailwind
4:42
classes have been successfully applied
4:44
you see this underline
4:47
this and let me just show you a little
4:50
bit of advanced example where I
4:54
show a simple card-like structure using
4:57
built using Tailwind CSS so you
5:10
refresh so just restart your application
5:19
so NG serve this is a command here so if
5:23
you make changes you need to restart
5:24
your application so
5:32
so in this way guys you can use
5:36
your Tailwind classes here you will see
5:40
we are applying these classes text 3XL
5:42
which is the underline class as well
5:47
so we can change this to four here if I
5:50
make this
5:58
change so so now it will be smaller if I
6:01
remove this underline
6:03
class you will see the underline will
6:05
get removed so in this way you can
6:07
integrate uh Tailwind CSS inside the
6:10
angular 19 project I showed you step
6:12
bystep process
6:15
so I have also given the GitHub link as
6:19
well so if you want to clone this
6:21
repo the link is given in the
6:24
description so you can directly clone
6:26
this
6:27
repo to integrate it so thank thank you
6:29
very much for watching this video and
6:31
also check out my website as well free
6:33
mediat tools.com which contains
6:36
thousands of tools regarding audio video
6:38
and MH and I will be seeing you in the
6:41
next video
#Computer Education
#Programming