How to Set up Tailwind with Vue 3
Tags: tailwindcss, vue
Published: 2021-07-17 16:16:52

This blog post addresses adding the Tailwind CSS framework to a Vue project. 

According to the [official Tailwind CSS documentation ](https://tailwindcss.com/docs) Tailwind CSS is a utility first framework for rapidly building custom user interfaces. Simply put, its a quick way to creating visually pleasing interfaces without having to write your own custom CSS and now we will be adding it to our Vue 3 project.

If you aren't already in the project directory, you can navigate to it with the command : 

```
cd my-vue-project
``` 
 where *my-vue-project* is the name of your project's folder

then install Tailwind and its peer-dependencies :

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

``` 
when you check the `package.json` file in your project you should see this added to your dependencies

```
@tailwindcss/postcss7-compat": "^2.2.4"
``` 
it confirms that tailwind has now been added to your project, but that is not all with the set up.

Next, we have to generate the configuration files for Tailwind and PostCSS :

```
npx tailwindcss init -p

``` 
when you check your project files you'll notice two files have been added - 
`tailwind.config.js` and `postcss.config.js`. 

The config file `tailwind.config.js` contains paths to components and pages of our application and it is in this file we also add customizations

```
//tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

``` 
Next, we will update the `purge` property :
```
// tailwind.config.js

module.exports = {
 purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

``` 

*What is happening here?* 

The `purge` property just as the name denotes purges unused css styles which was generated by tailwind on installation, this does not in any way affect the styles by third party CSS used in your project. Check [here](https://tailwindcss.com/docs/optimizing-for-production) to read up more about this.

Next, Inside the `src` folder we are going to create a subfolder called `styles` and inside the `styles` folder we create a file `tailwind.css`, note that this file can be named however you deem fit, I use `tailwind.css` here as it is more descriptive and you should also give it a descriptive name. Type this in your terminal :

```
mkdir src/styles && touch src/styles/tailwind.css

``` 
Another alternative to creating the subfolder is to create it in your code editor.

Inside `tailwind.css` add this :

```
/* ./src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

``` 
*What is happening here ?*

We made use of the directive `@tailwind`to import tailwind's styles. Now we have to import `tailwind.css` into the `main.js` file.

```
import { createApp } from 'vue';
import App from './App.vue';
import './styles/tailwind.css'; //Here

createApp(App).mount('#app');

``` 
Now, let us create something simple using Tailwind. In the `App.vue` file add this :
```
<template>
  <div class="justify-center flex items-center bg-blue-500 h-screen">
    <div class="text-4xl text-white">
      This is Tailwind 🙂
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

``` 
This is what should show up on your screen :

![Screen Shot 2021-07-05 at 1.51.11 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625489494325/BapzoDy9Q.png)