How to Integrate Tailwindcss with your Vue/Vite Project
Tags: vue, css, tutorial
Published: 2020-10-16 10:46:50

In this post I'll show you how to integrate and configure **Tailwindcss** in a **Vue** project! I'll also be using **Vite** instead of *vue-cli*!

## Why Tailwind?

Css frameworks have been around for quite a while now and are widly used around the internet. You may have heard or even used frameworks such as **Bootstrap** or **Foundation**, which are quite useful if you want to build a fast and somehow good looking application. 

The problem with these types of css frameworks is that they are considered to be high-level, meaning that they are meant to style components according to their specifications. This is somehow of a problem because if you want to customize your front-end you might have to create a new css file and overwritte most of the classes that the framework provides, which is tiresome and annoying at best!

To tackle this, **Tailwindcss** was created which in their words is *"a highly customizable, low-level CSS framework"* making it possible to add personal styling without the need to override any type of component.

## Setting up a Vite Project

A Vite project can easily be started by just typing in your terminal or command line <code>npm init vite-app <project-name></code>. Just by doing this you can see how fast and powerful **Vite** is! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75sq1jm8inrm936bg3vg.JPG)

After the setup just follow the next few commands to install all the dependencies and run your project for the first time. And that's it! You now have a brand new **Vite** project! Open it now in your favorite IDE and let's start!

## Setting up Taildwind CSS

It's now time for the main event! To install tailwind simply run the command <code>npm i tailwindcss</code>. After the instalation a few configurations are needed in order to start using it in your project!

First create a new css file. This can be placed and named anything so to simplify I'll name mine *tailwind.css* and store it in the project src directory. After creating, write the following inside the file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

This will load on build time all the tailwindcss classes into your css file!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qn7c3sscm0pzxjx5126n.JPG)

Next we need to create a config file for tailwind and postcss (since tailwindcss uses postcss) to customize as much as we want if necessary! To do so simply run <code>npx tailwindcss init -p</code>. As you might notice, two new files, *tailwind.config.js* and *postcss.config.js* were created in your project root folder.

Finally just change the *postcss.config.js* file like so:

```js
module.exports = {
  plugins: [
    require("tailwindcss"), 
    require("autoprefixer")
  ],
};
```

This will load *tailwindcss* and *autoprefixer* into postcss. **Vite** also has a cool feature that automatically loads my *postcss* config into all my styles in <code>*.vue</code> and imported plain <code>.css</code> files! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dzdir78t19jmncljbfja.JPG)

Finally, let's import *tailwind.css* file into our *main.js* by adding <code>import "./tailwind.css"</code> into the file and let's check out if everything is working accordingly!

To check if **tailwindcss** is up and running in our application let's add some classes into our *HelloWorld.vue* file.

```js
<template>
  <h1 class="text-red-500 bg-blue-500">{{ msg }}</h1>
  <button @click="count++" class="p-4 bg-green-600 rounded-full">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
```
The *text-red-500* will set the *h1* color to a light red and *bg-blue-500* will simply add a blue background color to the *h1*.
I've also added some classes in the *button*. The *p-4* class adds padding in all directions to the button and *bg-green-600* gives a nice green background. Finally the *rounded-full* class will fully round the button!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zj93dqg4owye8d46qqyi.JPG)

Awesome! Everything is working and now we can start using the amazing functionalities that **tailwindcss** provides! Have fun exploring *Tailwind*! If you want to take a look at all the possible classes check out their [documentation](https://tailwindcss.com/docs/installation)!