How to Install Tailwind CSS in Vue.js
Tags: tutorial, development, frontend, tailwindcss
Published: 2022-09-22 15:48:38

---
title: How to Install Tailwind CSS in Vue.js
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["tutorial", "development", "frontend", "tailwindcss"]
canonical_url: https://www.devwares.com/blog//how-to-install-tailwind-css-in-vuejs/
---

Tailwind CSS is not really the first utility-first CSS framework, but it’s safe to say it’s the most popular among developers. Using this framework is not limited to only your HTML files. You can use them together with another programming framework.

In this tailwind tutorial, we are going to look at using Tailwind CSS in Vue.js. Vue.js is a popular front-end JavaScript framework. Developers can use this framework to create stunning web designs for their projects.

## Table of Content

- Prerequisite
- Creating vue.js project
- Tailwind CSS install
- Configuring your tailwind file
- Including Tailwind in your CSS
- Building the project
- Conclusion

## Prerequisite

For you to follow along, you need to have the following requirement.

- Knowledge of Vue.js
- Knowledge of npm
- Basic CSS knowledge
- Basic JavaScript knowledge

At the end of this tailwind CSS tutorial, you will be able to install Tailwind CSS in VUE.js and create a simple modal. The tailwind CSS VUE.js modal will look like the image below.

![Tailwind CSS in VueJS](https://www.devwares.com/blog/images/tailwind-css-in-vue2.png)

## Creating Vue.js project

Creating a Vue.js project is easy. If you have not created your project yet. you can do that by opening your terminal and writing the following command.

**Code:**

```

npm init vite my-project

```

these commands will start Installing the VITE. You will be prompted to choose which framework to install. You will select VUE among the options presented.

![Tailwind CSS in VueJS](https://www.devwares.com/blog/images/tailwind-css-in-vue3.png)

Once you have chosen the framework you want to install, You can select the variant you wish to use, just like the image below.

![Tailwind CSS in VueJS](https://www.devwares.com/blog/images/tailwind-css-in-vue4.png)

After selecting the variant of your choice, the whole framework will install. You will see the image below on the terminal.

![Tailwind CSS in VueJS](https://www.devwares.com/blog/images/tailwind-css-in-vue5.png)

next step is to install the dependencies using npm

**Code:**

```

npm install.

```

## Tailwind CSS install

At this point, we are going to install Tailwind CSS on our Vue project

**Code:**

```

npm install –D tailwindcss@latest postcss@latest autoprefixer@latest

```

## Configuring your tailwind file

You will now have to configure some files to enable tailwind to work with the Vue project. The first thing is to generate the `tailwind.config.js` and `postcss.config.js` files by running the following code in the terminal.

**Code:**

```

npx tailwindcss init –p.

```

The command above will create two files. The first file,`‘tailwind.config.js` will look like the code below.

**Code:**

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

```

The second file is the postcss.config.js. It will already have the ‘tailwindcss’ and ‘autoprefixer’ configured and look like the code below.

```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

```

## Including Tailwind in your Vue.js project

At this stage, we are going to include Tailwind CSS in our Vue project CSS file. Inside the src folder, we will create a CSS file and call it `index.css`. You can call it anything you want. Now, we will write the following code inside.

**Code:**

```
@tailwind base;
@tailwind components;
@tailwind utilities;
.;

```

You can now save the file. Tailwind will swap the directives you have created to generate the styles based on the configuration design system.

You can now go ahead to make sure that the CSS is imported into the ‘src/your main.js’ file.

**Code:**

```
import { createApp } from 'vue';

import App from './App.vue';

import './index.css';

```

## Building the project

At this stage, we are going to now build a tailwind Vue modal to demonstrate that the Tailwind CSS is working on our vue.js files. Below are codes we are going to write on our `App.vue` file.

**Code:**

```
<template>
  <div>
    <button
      class="bg-purple-500 text-white active:bg-pink-600 font-bold uppercase 
    text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none 
    focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
      type="button"
      v-on:click="toggleModal()"
    >
      Open regular modal
    </button>
    <div
      v-if="showModal"
      class="overflow-x-hidden overflow-y-auto fixed 
    inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
    >
      <div class="relative w-auto my-6 mx-auto max-w-3xl">
        <!--content-->
        <div
          class="border-0 rounded-lg shadow-lg relative flex flex-col w-full
         bg-white outline-none focus:outline-none"
        >
          <!--header-->
          <div
            class="flex items-start justify-between p-5 border-b 
          border-solid border-blueGray-200 rounded-t"
          >
            <h3 class="text-3xl font-semibold">
              Modal Title
            </h3>
            <button
              class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right
            text-3xl leading-none font-semibold outline-none focus:outline-none"
              v-on:click="toggleModal()"
            >
              <span
                class="bg-transparent text-black opacity-5 
              h-6 w-6 text-2xl block outline-none focus:outline-none"
              >
                ×
              </span>
            </button>
          </div>
          <!--body-->
          <div class="relative p-6 flex-auto">
            <p class="my-4 text-blueGray-500 text-lg leading-relaxed">
              "if you don't have time to do it right , you must have time to do it over
            </p>
          </div>
          <!--footer-->
          <div
            class="flex items-center justify-end p-6 border-t border-solid
           border-blueGray-200 rounded-b"
          >
            <button
              class="text-purple-500 bg-transparent border border-solid border-purple-500
            hover:bg-purple-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6
            py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear
            transition-all duration-150"
              type="button"
              v-on:click="toggleModal()"
            >
              Close
            </button>
            <button
              class="text-purple-500 background-transparent font-bold uppercase
             px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear
              transition-all duration-150"
              type="button"
              v-on:click="toggleModal()"
            >
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
</template>

<script>
  export default {
    name: 'regular-modal',
    data() {
      return {
        showModal: false,
      };
    },
    methods: {
      toggleModal: function() {
        this.showModal = !this.showModal;
      },
    },
  };
</script>

```

After this, you can now run `npm run dev`. Then our webpage will look like the image below.

![Tailwind CSS in VueJS](https://www.devwares.com/blog/images/tailwind-css-in-vue6.png)

## Conclusion

We have successfully installed a tailwind CSS in our vue.js project. We also created a modal with Tailwind CSS to demonstrate that the Tailwind CSS Vue is working well.


## Resources


- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)