Up next in 10
Vue 3 and Tailwind CSS - Complete Setup Guide (WSL2/Ubuntu 20.04)
9K views
Jul 16, 2022
In this guide, I show you how to set up Vue 3 and Tailwind CSS using WSL 2 with Ubuntu 20.04. Article: https://www.ceos3c.com/web-development/tailwind-and-vue-3/ ⮘-=[⭐All important links in one place⭐]=-⮚ ↬ https://linktree.stefanrows.com ⮘-=[⭐Book a one-on-one Mentoring Session⭐]=-⮚ ↬ https://calendly.com/stefanrows/ ⮘-=[⭐All the stuff I use | Stefan's Amazon Store⭐]=-⮚ ↬ https://www.amazon.com/shop/ceos3ctutorials ⮘-=[⭐Join this channel to get access to perks⭐]=-⮚ https://www.youtube.com/channel/UCDqZyVCTwg9UyRWKgQ7Gizg/join ⮘-=[Subscribe]=-⮚ ↬ https://www.youtube.com/stefanrows?sub_confirmation=1 ⮘-=[Sign Up to my popular 5-Bullet-Friday Newsletter]=-⮚
View Video Transcript
0:00
Hey guys, what's up everyone
0:02
Welcome back to a new video. In today's video I want to quickly show you how to set up Tailwind CSS with Vue 3
0:09
I recently started to learn Vue.js and Tailwind because I was searching for something that
0:15
allows me to quickly throw together a prototype for a new project or for a new application
0:19
that I want to build. So while I was figuring out or while I tried to figure out how to install Tailwind on Vue
0:27
or tailwind with view i came across a couple of tutorials even the official documentation
0:33
but none of them were really complete to a part or to a point where i could get it to work so i
0:38
had to do some googling and stuff like this so i thought okay that's time a good time for creating
0:43
a tutorial around that the problem is that if you want to install tailwind css in view 3 you actually
0:52
need to be on one of the newer versions of node.js you also have to have a later version of npm
0:58
installed and if you use wsl2 or linux like myself then you run in some issues because if you install
1:05
npm from apt or from the apt repository same goes for node.js you are on the lower version than the
1:12
latest version and so i figured i'm gonna create a tutorial to show you exactly every single step
1:18
that you need to get that running. As I said, I'm using WSL2 with Ubuntu 20.04 underneath of it
1:26
If you want to learn more about WSL, I just released two tutorials on how to get started
1:30
with WSL2. They are complete beginner tutorials. So if you would like to try WSL2 for a specific
1:37
setup, go ahead and do those tutorials first. And in this tutorial, I will show you exactly
1:42
each and every step. We are going to update our system. Then we install a Node version manager
1:47
called nvm then we will go ahead and install the view cli create a new project with view and then
1:55
install tailwind and check if everything is working view and tailwind is now my daily driver for any
2:02
kind of project i'm working on so in case you would like to learn more about how to utilize or
2:07
how to get the most out of tailwind css while using view.js let me know in the comments below
2:12
and i will see to create a specific video on that topic all right with that out of the way guys let's
2:17
dive right in. All right, guys, as per usual, I provide a written article to my video tutorial
2:23
So if you go to my website, seosec.com, or you follow the link in the upper right corner of your
2:28
screen right now, or you're clicking the link in the description below, you'll find this Tailwind
2:32
and View3 complete guide. And if you open it up, you can scroll down, you see all the requirements
2:38
that I'm currently using. And you can go ahead and just copy and paste this code directly into
2:44
your terminal so you don't need to type everything from scratch. Alright, so for good measure this is something that we don't necessarily need to do because
2:54
we are not installing anything from apt but I always like to keep my system up to date before installing something new So I going to do a update and upgrade and sudo apt upgrade minus y
3:07
to update and upgrade my system. Now I already went ahead and did this to save us some time. So
3:12
this is all pretty clear. And the next thing we are going to do, I'm actually going to copy and
3:19
paste this from the website and this is the code to download nvm which is the node version manager
3:25
i was talking about earlier just make sure that you get the latest version while you install this
3:31
this link is in fact for the latest version right now but go on github and search for nvm to make
3:37
sure that you pull down the latest version all right so once you did that that's going to install
3:44
NVM. And then we need to source our bash RC file. And again, if you feel more comfortable copy and
3:52
pasting the code, just go ahead and do that. So I've sourced that and now we should be able to
3:57
use the NVM command and we do NVM minus minus version to make sure we are in fact on the latest
4:03
version there. All right. So to install node JS on the latest version, we simply do NVM install
4:11
install minus minus LTS for the long time support version. And you can see this is currently 14.18.1
4:21
And we do the same thing for NPM. So this is nvm install minus latest minus NPM
4:30
And this should bring us to version 8.something in a second
4:39
see if the written tutorial that I provided is actually working because I'm following it as we
4:44
speak. I actually checked it a couple of times. So it should be I'm pretty clear it should be
4:48
working. So it's version 8.1.1. And if you would have installed npm using apps, you would be on
4:54
version 3.5.x. I just tried it yesterday and it didn't work actually. So the next thing we're
5:00
going to install is a view CLI. So we do npm install minus g for global. And then we go at
5:07
view forward slash CLI and we're going to pull that down. Should just take a couple of seconds
5:14
too. And as I said, guys, this is a pretty fresh WSL2 terminal right here. Check out my guide on
5:21
WSL2. It's really popular and it shows you exactly how to set up a beautiful terminal using
5:27
status age and stuff like this. So this is how my actual terminal looks like. It's a little bit more
5:33
minimalistic than the one that I just set up here for you guys for this tutorial
5:37
Okay, so we have view installed. If you have the view CLI installed and for good measure
5:42
we simply do a quick NPM audit fix to get rid of some
5:46
possible security vulnerabilities, which in this case didn't really work. Doesn't matter now
5:54
Let see Okay we have an empty directory and then we go ahead and we do create a new view project now you can use Actually let first check view version and we should be on the 4 latest version of the view CLI
6:07
Okay, and from here we do view create and then we do my
6:13
Project for just a random project that we use for this test
6:18
And then we go ahead and hit enter You could also use the view GUI to install that but more on that in another video
6:25
So for the purpose of this video, we just choose default view 3 We don't need to select anything like her router or view X at this moment. So this is going ahead and it's creating our
6:38
View application right now should be finished in a couple of seconds there, too
6:43
Alright, there we go. We see the into my project or our project
6:48
I'm gonna clear up the screen there. And then the last thing we really need to do
6:53
is just simply view at Tailwind. I think it's just Tailwind. Yeah, it's just Tailwind
6:59
And it asks you if you want to still install it because we have uncommitted changes here, just select yes
7:06
And now it's installing the view CLI plugin for Tailwind. And I'm choosing minimal here
7:12
to generate the Tailwind config file. I like to keep it minimal there
7:16
and we have another couple of things going on with npm audit problems so we do another npm
7:24
audit fix for good measure let's see if it's actually fixing something now
7:28
sometimes it works sometimes it's fixing something and it actually seems like
7:34
it did not fix anything i have to spend more time with that i haven't looked into it too much okay
7:41
So the next thing we are going to do obviously is npm run serve to fire up our
7:47
View project for the first time and then we just navigate to localhost 8080
7:53
Which I'm going to do right now localhost 8080 All right, so a first indicator for
8:01
This to be working is that the view logo usually is in the middle right here
8:07
If you have created a view app before you probably recognize this so this is tailwind CSS already in effect and let's quickly we forgot one
8:17
thing cancel out of here and I just do code and a dot to open up Visual Studio
8:23
code right out of this folder this is a little trick that I'm also showing in my
8:28
WSL 2 videos so if you want to learn more about that just go ahead then do
8:34
Yes, trust the authors for this folder. It's perfectly fine. And I'm gonna move this right down here
8:43
And then I'm gonna do another npm run serve to fire up the server one more time
8:50
Now, if you use Visual Studio Code, I highly recommend you go to the extensions tab And again if you use WSL2 there a whole bunch of stuff that you need to set up first like the WSL remote VSL extension stuff like this but as I said check out the video
9:06
first for that now the thing that we want to install here is tailwind so we just look for
9:12
tailwind and we want to install the tailwind intellisense extension by breadcorns so click
9:20
to install it in your WSL and then that should be it now there's a couple of other things you
9:26
need to install if you use view and WSL 2 if you want to learn more about that let me know then I
9:33
create a separate video on how to set up a development environment with WSL 2 specifically
9:39
for view in fact let's go into the folder structure now just to show you that that's this
9:47
is actually working okay so another indicator for tailwind being in effect is the tailwind.config.js
9:55
file that we see right here this was automatically generated by installing the plugin and now if we
10:02
go inside of a component here now i don't have vtor installed let's quickly do that because
10:08
otherwise it's not really working so this is vtor this is the view extension for vs code so that
10:17
we are able to recognize view files and stuff like this. So let's quickly do that too
10:22
Okay. And now it should be showing correctly. Okay, there we go
10:27
So for a simple test, we're just going to change the background of something
10:33
Let's go into the Hello World component here. And we have the class
10:38
And if we press space now, and we do something like BG minus
10:42
then you see already the Tailwind CSS utility classes popping up right there
10:48
And if we choose BG Red, the color should automatically change there, which is an indicator for Tailwind being working
10:55
or for Tailwind to work. So this is really it. This is really all you need to do to set that up
11:02
All right, guys, this is really all there is to it. This is how to install Tailwind CSS in a ViewTree project
11:09
As I said, if you want more tutorials, If you want to have a whole tutorial on how to create a development environment using
11:17
WSL2 on Windows or with VS Code and everything like that, let me know in the comments below
11:23
Also if you want more Tailwind tutorials and stuff like this, just drop a comment there
11:29
Also give a like to the video if it was helpful to you and don't forget to subscribe to the
11:33
channel to help me out as well. And I hope to see you back in the next one
11:37
Thanks for watching guys. See you then