# Using tailwind2 on Vue 3 (vue-cli 4)
With the release of Vue 3, you may want to use it with the popular CSS framework Tailwind. This article is going to show you how to install Tailwind on your Vue 3 project.

---

## Create a Vue 3 project with vue-cli 4
Use `vue-cli` to create a project and choose Vue 3

vue create hello-world
cd hello-world


As of v2.0, Tailwind CSS depends on PostCSS 8. Vue-cli 4 is still using PostCSS 7. Fortunately, we can use PostCSS 7 compatibility build.

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead:

yarn remove tailwindcss postcss autoprefixer
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

## Create your configuration files
Then create `tailwind.config.js` and `postcss.config.js` files by using npx:

npx tailwindcss init -p

### Configure Tailwind
In `tailwind.config.js` file, configure the `purge` option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:

// 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: [],
}

### Include Tailwind in your CSS
Create the `./src/index.css` file and use the `@tailwind` directive to include Tailwind's `base`, `components`, and `utilities` styles, replacing the original file contents:

// ./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, ensure your CSS file is being imported in your `./src/main.js` file:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

Now when you run `yarn serve`, Tailwind CSS will be ready to use in your Vue 3 and vue-cli 4 project.

###### tags: `tailwind` `vue`