Install Vue via. NPM

npm install -g @vue/cli
Guide from https://cli.vuejs.org/

Create Vue project: Follow instructions in terminal

vue create my-project


Install Tailwindcss:

npm install tailwindcss
Guide from https://tailwindcss.com/docs/installation

Create Tailwind config file. I like to add the entire default configuration--full

npx tailwindcss init --full
Guide from https://tailwindcss.com/docs/configuration#scaffolding-the-entire-default-configuration

Create postcss.config.js in root

// postcss.config.js
const autoprefixer = require("autoprefixer")();
const tailwindcss = require("tailwindcss")("./tailwind.config.js");

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

Add a new stylesheet in assets folder (style.css)

@tailwind base;

@tailwind components;

@tailwind utilities;

Import style.css in main.js file

import '@/assets/style.css'

You should now be able to use Tailwindcss in all Vue components πŸ‘

Test that it works.
Edit component Helloworld.vue in src folder and add following between the template tag

<template> 
  <div>
    <div class="fixed bottom-0 inset-x-0 pb-2 sm:pb-5">
      <div class="max-w-screen-xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="p-2 rounded-lg bg-indigo-600 shadow-lg sm:p-3">
          <div class="flex items-center justify-between flex-wrap">
            <div class="w-0 flex-1 flex items-center">
          <span class="flex p-2 rounded-lg bg-indigo-800">
            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
            </svg>
          </span>
              <p class="ml-3 font-medium text-white truncate">
            <span class="md:hidden">
              We announced a new product!
            </span>
                <span class="hidden md:inline">
              Big news! We're excited to announce a brand new product.
            </span>
              </p>
            </div>
            <div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
              <div class="rounded-md shadow-sm">
                <a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
                  Learn more
                </a>
              </div>
            </div>
            <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
              <button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500 transition ease-in-out duration-150" aria-label="Dismiss">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

You should get something like: