Up next in 10
How to Setup Tailwind CSS 4 in Astro TypeScript Project in Visual Studio Code For Beginners
1K views
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/
View Video Transcript
0:00
[Music]
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 Astro framework
0:10
so we'll be following this documentation
0:12
which is given on their official website
0:14
how to integrate Tailwind CSS with Astro
0:18
so just I will simply copy this command
0:20
to create a brand new project so let me
0:24
go into the projects directory and open
0:28
the command line and just
0:30
paste this command so npm create Astro
0:33
at theate latest and then the project
0:36
name
0:39
so as you
0:43
basically you will see it will ask some
0:45
questions to you that if you want to
0:48
install create Astro I will say yes so
0:51
it is just installing the packages so
0:53
just wait for the installation to
0:56
finish so how would you like to start
0:58
your new project so I will just start
1:00
with the basic minimal
1:02
starter and install dependencies yes
1:05
initiate a new GitHub repo yes so
1:08
recently Tailwind has introduced the 4.0
1:11
version which is drastically different
1:13
from the previous version so that's
1:17
why there is a different process on how
1:20
to integrate it so I will just show you
1:23
how to integrate this inside Astro which
1:25
is a static stri generator very popular
1:29
one so just wait for the dependencies to
1:33
install it just take about 25 seconds to
1:37
install and then we will open this
1:39
project inside vs
1:51
code so now if you see guys you will see
1:55
the we need now need to go to the
1:56
project folder so simply say CD my
2:01
project Astro and then I will open it
2:05
inside vs code so this is a sample Astro
2:11
project and if I open the package.json
2:14
file we are using the latest version of
2:16
Astro which is
2:18
5.2.5 and the next step is to install
2:20
the Tailwind CSS so simply copy this
2:23
command and paste it so npm install
2:26
Tailwind CSS and at theate Tailwind CSS
2:29
/ V so we are using V development
2:33
environment so we actually install these
2:36
packages so once it is installed you
2:38
will see it is using the latest version
2:40
of Tailwind CSS which is
2:43
4.0.6 you can see that so now the next
2:46
step you need to open the Astro config
2:50
do MJS
2:53
file this is actually the file here the
2:56
configuration file for Astro so inside
2:59
this file you need to to paste some code
3:01
here you need to import the plugin of
3:05
Tailwind CSS like
3:09
this and inside this you need to pass
3:14
inside this define configuration object
3:17
you need to pass a property which is
3:22
V and inside this V you need to pass the
3:27
plugins
3:30
so one such plug-in we will
3:32
pass will be this Tailwind
3:36
CSS so you just need to make this change
3:39
we first of all import the Tailwind CSS
3:42
plug-in and then we pass the wheat
3:45
object and pass the plugins like this
3:49
now the next step is to go to your
3:52
Global CSS file which is located in
3:55
the if you see
4:00
I think this will be located in the
4:02
source and here you need to
4:05
create
4:07
a folder here for Styles and here you
4:10
can Define the
4:14
global. CSS file and here you need to
4:17
Simply
4:22
paste import
4:25
Tailwind CSS so just write this code
4:31
import Tailwind CSS so just create
4:34
inside your Source directory a new
4:36
folder Styles and inside this we Define
4:38
a file global. CSS and we paste this
4:46
code so then we just need
4:50
to start the project and then inside
4:54
your index. asro or welcome. asro this
4:59
is
5:01
your layout and this is your index route
5:04
here simply we will simply paste
5:09
it so we are using the Tailwind classes
5:13
you can see that we are printing a
5:15
simple hello world message and right at
5:17
the top we will import this uh CSS
5:24
file which is located in the Styles
5:27
folder and inside global. CSS so just
5:29
require it this is your Astro component
5:32
we are putting this HTML and then
5:34
requiring it the CSS file at the top so
5:38
now just need to run the project so npm
5:40
run def so as soon as you run the
5:43
project you will see it will start the
5:45
development server Local Host
5:48
4321 so just open
5:54
this so now you will see that the hello
5:56
world message will print out so it is
5:59
styled here here we are also styling it
6:02
with Tailwind CSS and if I make the
6:04
change here let's suppose I remove this
6:07
underline class you will see
6:09
automatically this will be removed and I
6:11
can increase the size here to 5
6:14
XEL so the size will be increased so in
6:18
this way guys you can integrate tailin
6:20
CSS and start using it inside your Astro
6:23
framework and it's slightly different
6:26
because it's the latest version 4.0 and
6:29
uh in this way you can integrate this
6:31
very simply I showed you the step by
6:33
step process and thank you very much for
6:36
watching this video and also hit the
6:40
like button and also check out my
6:41
website as well free mediat tools.com uh
6:44
which contains thousands of tools
6:46
regarding audio video and image and I
6:49
will be seeing you in the next video
#Computer Education
#Educational Software