Set-up Tailwind CSS with Vue in 2 minutes!

Set-up Tailwind CSS with Vue in 2 minutes!


do you want to set up tailwind in a vue application?
then let’s commence this operation here I have a freshly created app with the
vue cli tool so the first thing we need to do is to go
to tailwind css website and check out their documentation I will copy the npm installation command i will open a new terminal in vs code I will paste the installation command, and
add the save-dev property now we need to import the tailwind styles,
which are these 3 commands and for this we will need to create a stylesheet
for tailwind I will create a folder for css in my src path,
and paste the three tailwind commands inside it now lets initialize the tailwind config file,
this will create a file in our root folder we can see it right over here this is where you can add your styles such
as colors, margin and padding spaces, font sizes and family, and much more. for an example, I will replace the default
tailwind colors with my own color. let’s call this color awesome color and
give it a random hex code since my setup is using post css, I will use
the commands in this section so I will go to postcss.config.js and I will
paste as instructed on their documentation now we will need to import the tailwind stylesheet
that we created in our vue application and to do that we can just use the css import
in our styling part of the main component I will now run the npm serve command to build
our applicaiton with a watcher so that we can get updates through hot reloading I will browse to localhost to see the web
app let me set my windows here remember that we have set a custom color in
our tailwind configuration file, which we called awesome color let’s add a simple p tag in our html which we can now see here thanks to hot reloading I will now add some classes to our p tag,
and this is where tailwind comes in text-xl will make our text size larger and
bg-whatever color will give a background color according to the tailwind config file that’s basically it now we have tailwind in
our vue application we managed to do it in just 2 minutes, so
please like the video and subscribe if you haven’t already – see you next time and happy
coding

Comments

  1. Post
    Author
    tempo rary

    thx a lot, but in step 4 i don't have postcss.config.js, and i don't think i will use it

    so what to do for this step plz

Leave a Reply

Your email address will not be published. Required fields are marked *