How To Setup Your vue Js Project To Use Tailwinds CSS

Introduction.

Do you find yourself struggling with not having to implement the right kind of design for your website? This short "How - To " Tutorial will help you solve all your problem. As a full-stack developer, I had to deal with learning both Python and frontend stuff like HTML, CSS and Javascript.

CSS had become a major pain in the butt, it seems as if I was not catching up at all, after learning about other frameworks Like Bootsrap, MaterialCSS, Bulma and many others, I discovered that I still had a lot to deal with, and the gap was still far from cover, I had to deal with CSS stuffs like SASS and LESS which I hate to the core.

I had to seek out a great CSS framework for this job, I needed something that would make me feel much like I was writing CSS and also keeping up with the basics, guess what, I found Tailwinds CSS.

Guess What?

Hashnode was designed using tailwinds CSS. Voila!!!!!

What is TailWinds CSS?

Tailwinds CSS is a utility first framework, all Tailwinds does is to give you predefined styles in form of classes, which allows amazing designs to be implemented swiftly without having to configure and external CSS file, which can be a pain in the butt.

Why You Should Learn Tailwinds.

Provided you are from a different background and you want to dive into learning tailwinds all I can say is that you are welcome, Tailwinds CSS is just like writing raw CSS.

To be honest, CSS is volatile, and you need to write so many styles to achieve a simple goal, another problem is proper organization of you code structure, most times you find yourself having to repeat code multiple times, and once you stop coding it for a season, you tend to forget all you have learnt.

This is more reason why you should learn Tailwinds CSS to help save you stress.

No Need To Code an external CSS.

Tailwinds CSS can work for any JS client.

Tailwinds CSS beautiful.

Concentrate on What makes your website Unique.

Most time we want to just focus on logic, and having to write your own style from scratch can be a pain in the butt.

With Tailwinds CSS, all you just need do is to focus on your scripts while you bring in pre-built classes from tailwinds.css.

How To Configure Your Vue Project To Use Tailwinds CSS.

In this article, I am going to be making use of my portfolio website as a valid example, you can check out the Github repo here to make use of the source code.

Navigate to your vue Js project directory and Install Tailwinds CSS.

npm install tailwindcss

Just in case you run into errors, As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven't updated yet, which means you might see an error like this in your terminal after installing Tailwind and trying to compile your CSS. When you come across errors while using the code above you can make use of this code below.

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Navigate to the public directory in your Vue Js project and create a file called Tailwinds.css and add the following information to it.

// my-project/src/assets/css/tailwinds.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import it to your main.js file.

// my-project/src/main.js

import '@/assets/css/tailwinds.css'

Still in the project root directory, create A PostCSS config file and add the following code to it.

// my-project/postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

While in your project root directory, Run this code to create a configuration file for tailwinds CSS.

npx tailwindcss init

This configuration file allows you to be able to override tailwinds CSS default styles to your own.

Here is what you get in the root directory.

module.exports = {
  purge: [ ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Go back to the initial vue files and start writing tailwinds, Save you code and check your browser. Here is an example of a website that I created with Tailwinds CSS.

Conclusion.

I know that at this point, you are used to writing your own CSS or even took all the pain to learn bootstrap or other CSS frameworks which is good.

The main problem with these frameworks is that they simply do too much for you, and hide a lot from you, later on, you discover that you are so used to this framework and it harder to switch.

To be on the safe side, and avoid complications in your journey, I recommend you learn Tailwinds CSS.

Connect With Me On Twitter.

My friend, It a good thing that we are able to connect on this platform to share innovative ideas, in the meantime I am not an Island of knowledge and I also want to hear from you.
I would like to connect with you via Twitter