How to Setup Tailwind CSS in Vue 3
Tags: vue, javascript, tailwindcss, webdev
Published: 2022-08-06 04:19:57

> This article was first posted on [devjavu.space](https://devjavu.space/post/how-to-setup-tailwind-css-in-vue-3/) 

[Tailwind CSS](https://tailwindcss.com/) is one of the newest, and coolest kids on the block. As a Utility library, Tailwind lets you build UI components with ease. Here’s a quick guide on setting up tailwind in your Vue 3 project.

> Psst! There’s an official walkthrough in the Tailwind documentation, [here](https://tailwindcss.com/docs/guides/vue-3-vite).

First, generate a Vue 3 project using the [vue-cli](https://cli.vuejs.org/):

```bash
vue create my-awesome-app
```

Navigate to the project directory:

```bash
cd my-awesome-app
```

Next, we’d need to install tailwind and its dependencies (PostCSS & auto-prefixer).


```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

Or using yarn:

```bash
yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest
```

Note: if you’re faced with this error:

```bash
> Error: PostCSS plugin tailwindcss requires PostCSS 8.
```

You would need to install a different build of tailwind that supports PostCSS: 7.

```bash
npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```
Generate the Tailwind and post CSS configuration files:

```bash
npx tailwindcss init -p
```

This will create two files in your root directory: `tailwind.config.js` and `postcss.config.js`. The tailwind config file is where you add in customization and theming for your app. It is also where you tell tailwind what paths to search for your pages and components. It looks something like this:

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

We won’t go into explaining each of those properties, however, we need to update the “purge” property to include the path to our components and pages.

```js
// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

Next, create a folder called “styles”, and within that folder, create an entry CSS file (app.css):


```bash
mkdir src/styles && touch src/styles/app.css
```

We’ll import tailwind’s styles using the `@tailwind` directive within our entry CSS file.

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

Finally, import your entry CSS file in your entry Javascript file(main.js):

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

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

Spin up your server and start using Tailwind’s goodness in your Vue 3 application. Try updating the **App.vue** component like so:

```html
<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello 👋🏼
    </div>
  </div>
</template>

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

You’ll get this result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybdhn25hnxyarjvyexzq.png)

You can find all of Tailwind’s classes and options in the [official documentation](https://tailwindcss.com/docs).

This walkthrough is also streamlined from the [official docs](https://tailwindcss.com/docs/guides/vue-3-vite):

---

Cheers ☕️