Using Tailwind CSS with Vue.js
Tags: vue, javascript, beginners
Published: 2020-03-19 19:18:29

---
title: Using Tailwind CSS with Vue.js
published: true
description: Setting up Vue.js to use the Tailwind CSS framework.
tags: vuejs, javascript, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gysryn6k8w02ik49hzxj.png
---

Just a quick post to show you how to add [Tailwind CSS](https://tailwindcss.com/) to your [Vue.js](https://vuejs.org/) app if you're not familiar with things about Webpack and Vue-loader.

If you'd like to clone the example app, check out [my repo on GitHub](https://github.com/lukeocodes/vuejs-tailwind).

## Vue.js CLI

Use the [Vue CLI](https://cli.vuejs.org/) to generate a basic [Vue.js](https://vuejs.org/) app. Install it if you haven't already.

```bash
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

> The package name changed from `vue-cli` to `@vue/cli`. If you have the previous `vue-cli` package installed globally, you need to uninstall it first with `npm uninstall vue-cli -g` or `yarn global remove vue-cli`.

You can check you have the right version (`@vue/cli`) with this command:

```bash
vue --version
```

## Create a Basic Vue.js App

Run the create command of the Vue CLI. This will generate a basic [Vue.js](https://vuejs.org/) app. You'll be prompted with some options. When asked, you can select the defaults (I don't know what they all do yet anyway) or include the `--default` option to skip the prompts.

```bash
vue create tailwind-vue-app
```

This command generates a basic [Vue.js](https://vuejs.org/) app into a new directory `tailwind-vue-app`. It also runs `npm install` (or `yarn`) so you've no need to do that. You can now change into the new directory and check it all runs okay.

Change into the app directory like so.

```bash
cd tailwind-vue-app
```

Run the application with this command. 

```bash
npm run serve
# OR
yarn serve
```

Now running, you can check out your basic hello-world [Vue.js](https://vuejs.org/) app, which is probably running at [localhost:8080](http://localhost:8080).

![Hello World Vue.js App](https://dev-to-uploads.s3.amazonaws.com/i/oizn8eu99sq2kh0q90mj.png)

## Install Tailwind CSS as a Dependency

Before using [Tailwind CSS](https://tailwindcss.com/) in the app, install it as a dependency and configure it. 

```bash
npm install tailwindcss
# OR
yarn add tailwindcss
```

## Configure Vue.js for Tailwind CSS

Webpack (and Vue-loader which is a Webpack loader for [Vue.js](https://vuejs.org/) components) can be configured to use PostCSS which is a Webpack loader for CSS. 

It will look for the configuration inside a `postcss.config.js` file and can build the app with CSS from packages you add.

The demo app generated by Vue CLI doesn't create a `postcss.config.js` file by default. Do that now using your editor or this command.

```bash
touch postcss.config.js
```

And, configure it using this code.

```js
// postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

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

## Add Tailwind CSS to a CSS Asset

The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include [Tailwind CSS](https://tailwindcss.com/), create a CSS asset using your editor or the commands below.

```bash
# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
```

Now add this code, which adds the various packages of the [Tailwind CSS](https://tailwindcss.com/) library.

```css
/* src/assets/styles/index.css */

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

Edit the `src/main.js` file as shown here, adding an import line to include the new `index.css` stylesheet asset.

```diff
  import Vue from 'vue'
  import App from './App.vue'
+ 
+ import './assets/styles/index.css';

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App),
  }).$mount('#app')
```

## Drop-In Tailwind CSS Components

To show it's working as expected, now you can effectively drop-in components straight from the [Tailwind CSS](https://tailwindcss.com/) component library. For example, replace the [Vue.js](https://vuejs.org/) logo with a [responsive header navbar](https://tailwindcss.com/components/navigation#responsive-header) by following these steps:

First, create a new empty component file called `Nav.vue` either using your editor or this command.

```bash
touch src/components/Nav.vue
```

Next, inside `src/components/Nav.vue`, create the component with this code.

```vue
<template>
  <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
      <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
    </div>
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
      <div class="text-sm lg:flex-grow">
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
          Docs
        </a>
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
          Examples
        </a>
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
          Blog
        </a>
      </div>
      <div>
        <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Nav'
}
</script>
```

Everything outside of the `<nav>` element is the makings of a standard static Vue component, `<template></template>` and `<script></script>` for containing the markup and the export respectively. The `<nav>` element is a copy and paste straight from the [Tailwind CSS responsive header navigation component](https://tailwindcss.com/components/navigation#responsive-header).

Now, edit the `src/App.vue` component and make the following changes.

```diff
  <template>
    <div id="app">
-     <img alt="Vue logo" src="./assets/logo.png">
+     <Nav class="mb-6" />
-     <HelloWorld msg="Welcome to Your Vue.js App"/>
+     <HelloWorld msg="Welcome to Your Vue.js App" class="text-center"/>
    </div>
  </template>

  <script>
  import HelloWorld from './components/HelloWorld.vue'
+ import Nav from './components/Nav.vue'

  export default {
    name: 'App',
    components: {
-     HelloWorld
+     HelloWorld,
+     Nav
    }
  }
  </script>

- <style>
- #app {
-   font-family: Avenir, Helvetica, Arial, sans-serif;
-   -webkit-font-smoothing: antialiased;
-   -moz-osx-font-smoothing: grayscale;
-   text-align: center;
-   color: #2c3e50;
-   margin-top: 60px;
- }
- </style>
```

You even delete the blob of CSS in the component. There was nothing wrong with it, but you can achieve the same results using pre-defined classes available from [Tailwind CSS](https://tailwindcss.com/).

With that change saved, check out your app and it should look something like this 👇

![Tailwind CSS Components inside Vue.js](https://dev-to-uploads.s3.amazonaws.com/i/f6yijz1nw59o5oqv40q5.png)

This little guide is just something quick I picked up for a larger series I'm working at the moment! 

![Go, team! 🎉](https://media.giphy.com/media/pMzIC9Knz7IWI/giphy.gif)

Fork or clone [my example GitHub repo](https://github.com/lukeocodes/vuejs-tailwind), and let me know what you think 👇