If you want to use Tailwind framework in your Vue project here you can find set up instruction:

1. Fast one

We can set up Tailwind in our project using vue plugin just use npm and run:

vue add @ky-is/tailwind

2. Manually

This option is for every one who want to make it manually, let’s start!

First of all we need to install Tailwind:

npm install tailwindcss

Next, we must create CSS e.g. assets/css/tailwind.css, where we need to add tailwind code.

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

Keep in mind that you shouldn’t do that in your App.vue, this would increase the recompile time!

Next we need to create Tailwind config file:

npx tailwindcss init

If you don’t have a ‘postcss.config.js’ you must create it to the root of your project and add a code from below;

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

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

Last step – just import line to include the new tailwind.css stylesheet asset.

import Vue from 'vue'
  import App from './App.vue'

  import './assets/styles/tailwind.css'

  Vue.config.productionTip = false

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

That’s all!
Have a great adventure with Tailwind!